Question

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

它导致突然的行为，甚至它的网址更改但动画过程仍然存在。我尝试过 .stop（）， .clearQueue（）甚至 .finish（）属性在切换之前结束动画，但没有任何帮助我。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 1

使用ngAnimate代替jQuery的.animate()属性。

检查here以获取插图和示例。

对于上述情况。试试这个

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

而不是

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

Answer 2

此处已更新plunker。

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

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

更好的做法永远不要合并jQuery with Angular。

jQuery动画中断问题

2 个答案: