Jump to content
Sign in to follow this  
Albeld

How to get smooth filtering to this?

Recommended Posts

Hi everyone,

I've found this Filter Elements Tutorial and couldn't manage it yet, to have transitions when changing the classes. Can anyone help me with this?

 

Thanks in advance, this would really help me!

Share this post


Link to post
Share on other sites

The display property is not animatable. If you would like to use transitions you'll have to use Javascript to modify properties you want to change like height or opacity and then, once the animation finishes playing, change the display property to "none" or "block". You can use setTimeout to wait for the animation to finish.

Share this post


Link to post
Share on other sites

So, there is no simple way to have them like slide in from the right or fade in, right after they get the class "show"?

Edited by Albeld

Share this post


Link to post
Share on other sites

You can use CSS transitions, you can either do that with the show class or make another class and assign that one also:

https://www.w3schools.com/css/css3_transitions.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

You still wouldn't use display though, that is not animatable.  You could use opacity though.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×