D
D
Dmitry2016-08-18 17:35:23
JavaScript
Dmitry, 2016-08-18 17:35:23

Animation implementation examples from 'display': 'block' to 'display': 'none'?

I would like to look at examples not just from opacity: 1to opacity: 0with transition, but something more interesting. Tried to look for it myself, but somehow dull. Can you at least tell me where to look or what to google?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
H
Hazrat Hajikerimov, 2016-08-18
@letehaha

Use transform, for example for the default menu dropdown list the following values:

.menu {
      visibility: hidden; 
      will-change: transform, opacity;
      opacity: 0;
      transition: all 0.4s ease-in-out;

      /* сама анимация движения */
     transform: perspective(210px) rotateX(5deg);
}

and on hover:
opacity: 1;
    visibility: visible; 
    transform: rotateX(0);

And for animation, using display: none is not correct in my opinion, visibility: visible is better, and after the animation is completed, display: none
I advise you to read

I
Ivan Bogachev, 2016-08-18
@sfi0zy

Animation implementation examples from 'display': 'block' to 'display': 'none'?

You need to google the differences between display: none and visibility: hidden and opacity: 0 . It's not exactly the same thing.

I
iBird Rose, 2016-08-18
@iiiBird

fadeIn, FadeOut, and SlideIn, SlideOut. everything is customizable and customizable for every taste.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question