【问题标题】:anyway to add css3 transition animation to element on jQuery event无论如何要在 jQuery 事件上向元素添加 css3 过渡动画
【发布时间】:2011-08-01 03:20:38
【问题描述】:

有没有办法在 jQuery 事件上添加 css3 动画,例如:

<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>

【问题讨论】:

    标签: jquery animation css transition


    【解决方案1】:

    我认为 animo.js 可能是你的答案http://labs.bigroomstudios.com/libraries/animo-js(来自http://tympanus.net/codrops/collective/collective-80/

    根据他们的网站...

    “您可以轻松地堆叠动画以一个接一个地触发,指定动画完成的回调,或者简单地在任何事件或您喜欢的任何时刻触发动画。”

    【讨论】:

      【解决方案2】:

      只要放

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

      在 .box 声明中。 你的JS很好。

      【讨论】:

      • 这对我不起作用,单击按钮时没有任何反应。
      • 它在小提琴中工作,但我正在努力让它工作。看起来我只是在我的实际代码中遗漏了一些东西。谢谢!
      猜你喜欢
      • 2012-05-16
      • 2013-07-03
      • 2017-03-28
      • 1970-01-01
      • 2013-06-11
      • 1970-01-01
      • 1970-01-01
      • 2019-08-19
      • 1970-01-01
      相关资源
      最近更新 更多