Kevin Powell - Community•3y ago

Transition with display none

Is there a way to make this, but with display: none;. Or to fix visibility to use the available space? https://gyazo.com/c239c7d5de947aa501e712ff9448ea26

Gyazo

24 Replies

13eck•3y ago

You cannot directly transition display, as it's not an animatable property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties You could use some JS to detect when the visibility transition is done and change the display property, though

MyndiOP•3y ago

Is there a simple way to do it with JS? I'm just filling up data right now (it's a lot KMS

13eck•3y ago

Something like this:

parentDiv.addEventListener('transitionend', (ev) => {
  if (ev.target should be transitioned) {
    ev.target.style.display = none;
  }
});

parentDiv.addEventListener('transitionend', (ev) => {
  if (ev.target should be transitioned) {
    ev.target.style.display = none;
  }
});

Might have to play with it a little (untested code) However, you'll have to also add some functionality to reset the display before you transition again from visibility 0 to 1 https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

b1mind•3y ago

Use opacity or visibility. none removes from dom and it will shift and created layout shifts

13eck•3y ago

DOM shifting is the point, though, so that invis elements don't take up space :p

b1mind•3y ago

if dom shifting is the point you should use FLIP

13eck•3y ago

(at least that's my understanding)

b1mind•3y ago

also DOM shifting is never the point lol its very bad for preformance

13eck•3y ago

"FLIP"? Is that an acronym I'm not familiar with or did you use caps for emphaasis?

b1mind•3y ago

First last invert play its a common pattern in the animation world method rather*

13eck•3y ago

And CSS Tricks to the rescue! https://css-tricks.com/animating-layouts-with-the-flip-technique/

David Khourshid

CSS-Tricks

Animating Layouts with the FLIP Technique | CSS-Tricks

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said,

MyndiOP•3y ago

Oh wow, okay I will need to check into that later. For now, I guess I will simply use display. https://myntsu.github.io/wind-cutter-guide/cooking.html At least I finished everything. Now I need to learn this FLIP thingy. First time using grid on my own as well :D @b1mind sorry to bother you. But what option do you think it would be the best to fix this firefox issue?

b1mind•3y ago

whats the issue?

MyndiOP•3y ago

^ Basically doesn't work entirely on firefox. Because it uses has to show the grid below.

b1mind•3y ago

use JS to add the class that makes it visible? good use of Event Delegation, put the event listener on the parent section. Then based on which is clicked you can add the class

MyndiOP•3y ago

So, a query selector for the label, that on clicks, displays the item beneath? I would have to do 1:1 right, so 12 functions?

b1mind•3y ago

mmm I might add a dataset to pass too, would make it easier Honestly this is the kinda stuff frameworks are great for. 😄

MyndiOP•3y ago

Yeah, I will look into that later then. I just liked the has approach.

b1mind•3y ago

Svelte would allow you to use FLIP animations really easy with its built in too >.>;;

MyndiOP•3y ago

But then boom, my day not fine, firefox I hate you.

b1mind•3y ago

:has() is brand new yea

MyndiOP•3y ago

I'm still new, so haven't dive into JS frameworks :'3 Eventually, and with time, I will.

b1mind•3y ago

respect yea learn the JS ways. Again look up Event Delegation for the click listener, then you could pass/check a data atrrib to add/remove class (or style based on that attribute) you can combine that with attrib selector like you do now actually I just choose to use datasets Also just gotta say really nice demo using has great work on this thus far 👍

MyndiOP•3y ago

I was trying to work on a multi-filter selection, but haven't figured out a way yet. Like, if I select 2, then show me just this one specifically. Maybe it's not possible, but that won't stop me from trying dogekek

Gaming

Programming

Transition with display none