в любом случае добавить анимацию перехода css3 к элементу в событии jQuery - PullRequest
Новая
       12

в любом случае добавить анимацию перехода css3 к элементу в событии jQuery

0 голосов
/ 08 апреля 2011

есть ли способ добавить анимацию css3 к событию jQuery, например: 

<style>
.box{
width:100px;
height:100px;
bakground-color:#000;
}

.animate{
 width:0px;
 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
 -moz-transition-property: width; -moz-transition-duration: 500ms;
}

<style>

<html>
<div class="box"></div>

<button>click me to animate</button>

$('button').click(function(){
$('.box').addClass('animate');
});

</html>

Ответы [ 2 ]

1 голос
/ 11 сентября 2013

Я думаю, что animo.js может быть вашим ответом http://labs.bigroomstudios.com/libraries/animo-js (через http://tympanus.net/codrops/collective/collective-80/)

За свой сайт ...

«Вы можете легко складывать анимации, чтобы запускать одну за другой, указывать обратные вызовы для завершения анимации или просто запускать анимации для любого события или в любой момент, когда пожелаете».

1 голос
/ 08 апреля 2011

Просто поставьте 

 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
     -moz-transition-property: width; -moz-transition-duration: 500ms;

в декларации .box. Ваш JS в порядке.

...