如何使用" promise-style"来停止Velocity动画。

时间:2016-04-29 09:36:19

标签: velocity.js

我使用Velocity承诺(没有jQuery ......):

var Velocity = require('velocity-animate');
var animation = Velocity(document.getElementById('some-id'), { opacity: 0 });

如果animation返回一个承诺,我该如何随意停止此动画?

1 个答案:

答案 0 :(得分:0)

你可以使用效用函数停止dom元素上的任何正在运行的动画,你需要做的就是将dom元素作为第一个参数传递,并且"停止"作为第二个参数Velocity(document.getElementById('some-id'),"stop")

参见此工作示例



var a = Velocity(document.getElementById('rect'),{opacity:0},3000);

setTimeout(function(){
	Velocity(document.getElementById('rect'),"stop");
},1000);

#rect{
  background-color:green;
  height:100px;
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="rect">
  
</div>
&#13;
&#13;
&#13;

正如您所见,承诺a不会用于停止动画。