Как сделать css-анимацию по скрытию элемента?

Question

[Николай]

Суть вот в чем, если задать элементу анимацию через keyframes, то она всегда будет исполняться когда элемент становиться видимым. Пример — jsfiddle.net/Zvyxd
Как-то можно добиться обратного эффекта когда элемент становиться display: none;?

Answer 1

[Вадим Белкин]

Вы хотите сделать плавное появление и скрытие? Если да, то зачем keyframes? Можно же для элемента сделать доп.класс который отвечает за его скрытие или показ. И удалять его или добавлять.
jsfiddle.net/YxsTV

Comments

[Николай]

@BelkinVadim вы допускаете примерно такую же ошибку. Элемент прозрачный, но не скрытый - uimages.ru/img/6kmsacqcck.png Хотя по нему и не получается кликнуть и событие вряд ли сработает, сролл появляется и место он занимает. В общем единственным правильным решением это будет обработка событий по завершению анимации, как-то так — jsfiddle.net/Zvyxd/8

[Вадим Белкин]

jsfiddle.net/Zvyxd/8 в этом примере скролл появляется при показе элемента. он будет появляться в любом случае если элемент у вас будет выходить за рамки размеров окна. Ну а вообще согласен с тем что лучше после завершения анимации элемент скрывать.

[Николай]

@BelkinVadim При показе это естественно, а вот в вашем примере он остается и после того как стал прозрачным, что как бы плохо. Только display: none; полностью скрывает отображение элемента на странице.

Answer 2

[Виталий Киренков]

jsfiddle.net/Zvyxd/5

Я очень костыльно написал на скорую руку, но логику вы по идее должны понять, почему анимация будет работать.

Comments

[Николай]

@DeLaVega то что вы предлагаете не скрывает элемент, а делает его прозрачным. Он остается на своем месте, по нему можно будет кликать, будут срабатывать события и так далее. Все эти танцы с дополнительными классами я знаю, а так же можно ловить событие onAnimationEnd и в конечном счете скрывать его, но это решение не такое простое, как с показом элемента.

[Виталий Киренков]

Дело в том, что у ксс анимаций нет колбэка. И раз вы всё равно используете js, то почему бы и анимацию целиком не написать? И да, я открывал в фоксе, у меня тоже изначально не было никакой анимации.

А то что я вам предлагаю то вместо хайд у вас будет нечто .animate({"left": "-=200px", opacity: "hide"})

[Виталий Киренков]

И у вас проблема с префиксами. Они всегда должны быть раньше чем то же, но без префикса.

[Николай]

@DeLaVega Дело в том, что у css анимации есть колбэк — www.sitepoint.com/css3-animation-javascript-event-... , но как-то не хочется. Суть вопроса в том, чтобы это было так же просто как и с показом. А в FireFox и правда не работает без префиксов -moz, я написал только для -webkit. И кстати нативная анимация на css на много быстрее и плавнее нежели js, просто не хочется вешать обработчики на события по анимации, но видимо придется. Кстати события есть как и для анимации (onAnimationEnd) так и для transition (onTransitionEnd).

[Виталий Киренков]

@Piterski да, вы правы на счёт плавности и скорости, но всё зависит от того где применять. И как вы заметили, колбэк идёт всё равно на js, а не внутри ксс-а...

Answer 3

[isxaker]

Updated
Я вот так недавно делал
Link

Comments

[Николай]

@isxaker Нууу setTimeout это такой костыль... лучше уж события по анимации использовать.

[isxaker]

Если заменить css анимацию на jquery animate и по колбеку вызывать hide, то получится не такой уж и костыль )

[Николай]

@isxaker а можно просто использовать события стандартной анимации jsfiddle.net/Zvyxd/8

Answer 4

[Сергей Мельников]

jsfiddle.net/Zvyxd/10

Comments

[Николай]

@mlnkv и вы туда же - www.w3schools.com/css/css_display_visibility.asp

Answer 5

[twixoff]

Создайте два класа с разной анимацией - на появление и на скрытие.
Затем просто добавляйте нужный класс в зависимости от ситуации - показать или скрыть.

Comments

[Николай]

@twixoff ну вы бы хоть читали другие ответы прежде чем писать :( Нельзя просто так сделать класс для скрытия с display: none; так как оно применяется мгновенно и анимации просто не произойдет.

Answer 6

[Николай Стяжкин]

Как скрыть example_block по второму клику на "Показать эелемент"?