j查询动画中断问题

Question

我正在研究角度程序，其中我有一个图像，我正在使用jQuery.animate((属性进行动画处理。它工作正常，但是当我在动画中间使用 ui-router 更改状态时会出现问题。

它会导致突然的行为，甚至其 url 更改，但动画过程仍然存在。我已经尝试了 .stop((、.clearQueue(( 甚至.finish((属性来在切换之前结束动画，但对我没有任何帮助。

app.controller('appCtrl',function () {
setTimeout(function () {
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
},1000);
setTimeout(function () {
$('#character').animate({marginTop:"A2px",marginLeft:"B2px"},1000);
},3000);
setTimeout(function () {
$('#character').animate({marginTop:"A3px",marginLeft:"B3px"},1000);
},5000);
setTimeout(function () {
$('#character').animate({marginTop:"A4px",marginLeft:"B4px"},1000);
},7000);
setTimeout(function () {
$('#character').animate({marginTop:"A5px",marginLeft:"B5px"},1000);
},9000);
});

<div class="">
<div class="">
<img src="character.png" id="character" alt="" />
</div>
<div class="">
<input type="button" name="name" value="BACK" ui-sref="backpage">
<input type="button" name="name" value="NEXT" ui-sref="nextpage">
</div>
</div>

Answer 1

这是更新的 plunker。

使用$timeout并在控制器销毁时删除超时。

$scope.$on('$destroy', function() {
$timeout.cancel(timer);
});

更好的做法是永远不要将jQuery与Angular合并。

Answer 2

使用ngAnimate而不是 jQuery 的.animate()属性。

查看此处的插图和示例。

对于以上。试试这个

angular.element(document.querySelector(#character)).animate({marginTop:"A1px",marginLeft:"B1px"},1000);

而不是

$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);