CSS переходы _ без наведения? - PullRequest
Новая
       11

CSS переходы _ без наведения?

2 голосов
/ 19 июля 2011

Достаточно простой вопрос:

Можно ли использовать переходы CSS, когда было бы нецелесообразно / невозможно запускать анимацию с помощью псевдоселекторов (то есть :hover, :active и т. Д.)?

Мой пример использования: я хочу что-то оживить после отправки формы. Я думал, что смогу сделать что-то вроде: 

.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }

Затем, используя javascript, я бы добавил класс shown к этому элементу, который я хочу анимировать.

Почему бы просто не использовать jQuery или аналогичный для animate? Я рад, что ты спросил. Переходы CSS намного более плавные на iPhone и других мобильных устройствах, на которые я нацеливаюсь. В настоящее время я делаю анимации с помощью jQuery, но они не так гладки, как могли бы.

Отредактировано, чтобы уточнить, что я спрашивал о псевдоселекторах.

Ответы [ 2 ]

3 голосов
/ 19 июля 2011

Все должно работать так, как вы ожидаете.JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/

 .success_message {
   opacity: 0.0;
   transition: opacity 0.3s linear;
   -webkit-transition: opacity 0.3s linear;
   -moz-transition: opacity 0.3s linear;  
   -o-transition: opacity 0.3s linear;
 }

 .success_message.shown {
   opacity: 1.0;
 }

Если это не решит вашу проблему, пожалуйста, включите дополнительные примеры кода или особенности браузера.Удачи!

1 голос
/ 19 июля 2011

Да, вы можете сделать это. Переходы CSS работают каждый раз, когда изменяется свойство css, даже если это произошло из-за изменения класса.

...