Примеры реализации анимации от 'display': 'block' к 'display': 'none'?

Question

[Дмитрий]

Хотелось бы посмотреть на примеры не просто от opacity: 1 до opacity: 0 с transition, а что-то более интересное. Пытался искать сам, но что-то как-то глухо. Может хотя бы подскажите где смотреть или что гуглить?

Answer 1

[Хазрат Гаджикеримов]

Использовать transform, например для выпадающего списка меню по умолчанию следующее значения:

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

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

а при ховере:

opacity: 1;
    visibility: visible; 
    transform: rotateX(0);

И для анимации использовать display: none не правильно по моему, лучше visibility: visible, а после завершения анимации display: none

Советую почитать

Answer 2

[Ivan Bogachev]

Примеры реализации анимации от 'display': 'block' к 'display': 'none'?

Вам нужно загуглить отличия display: none от visibility: hidden и от opacity: 0. Это сильно не одно и то же.

Comments

[Дмитрий]

Я знаю отличия. В основном, что я находил, шло opacity и после него через setTimeOut применялось display: none. Мне же хотелось бы посмотреть на реализацию отменную от fadeIn/fadeOut

Answer 3

[iBird Rose]

fadeIn, FadeOut, а также SlideIn, SlideOut. все настраивается и кастомизируется на любой вкус.

Comments

[Дмитрий]

Ну это как раз то, что мне не очень интересно) Я об этом сразу и сказал