如何使用＆＃34; promise-style＆＃34;来停止Velocity动画。

Question

我使用Velocity承诺（没有jQuery ......）：

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

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

Answer 1

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

参见此工作示例

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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