Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Как включить display: block и none в анимацию

Я думаю, что все уже успели попробовать css3 анимацию. Если нет, то закройте этот пост и идите пробуйте. Очень удобно, симпатично (дизайнеры радуются, вам плюсы в карму и в зарплату) и главное просто в применении.

Наверное, все мы начали использовать анимацию по старой привычке, привитой ещё jQuery, со свойства dispay: none. Однако, быстро поняли, что это ни разу не работает. Дело в том, что анимация это математическая операция – браузер считает изменение от одной величины до другой, а вот как высчитать переход от display: block к display: none?

Обычно на форумах сразу советую использовать opacity, что в принципе правильно, но не всегда подходит. Главный минус в том, что при таком подходе элемент все равно будет занимать место на странице. Тут на помощь приходят либо position: absolute и left: – 1000px, либо подобная комбинация.

Однако и это может не удовлетворить пытливого разработчика. Может стоять необходимость решить какой-то странный баг в старых версиях браузер, при этом сохранив все плюшки все той же анимации для новых и очень хотелось бы как-то использовать display.

Что же, у меня есть для тебя решение, раз уж на то пошло. Transitions в анимации тебе не помогут, они на самом деле бессильны. А вот свойство animation вполне себе решение. Главное её преимущество для нас в том, что анимация тут задаётся покадрово или “попрацентово” если вам так конгруэнтнее.

JS Bin on jsbin.com

Обратите внимание на работу со вспомогательным классами и событием animationend. Безусловно хотелось бы все сделать проще и менее запутанно, на самом деле это возможно, если, например отказаться от обратной анимации, а просто закрывать подсказку одним махом. Однако, ваши дизайнеры на это не согласятся -)

Поделиться:
comments powered by Disqus