停止由 $animate.addClass 启动的动画答案

【问题标题】：Stop animation started by $animate.addClass停止由 $animate.addClass 启动的动画
【发布时间】：2016-10-09 16:01:41
【问题描述】：

有没有办法停止由 $animate.addClass 启动的动画？

angular.module("app", []);
angular.module("app").directive("stopAnimation", function($animate) {
  return {
    link: function(scope, element) {
      setTimeout(function() {
        
        // Start animation
        scope.$applyAsync(function() {
          var promise = $animate.addClass(element, "is-visible");
          
          // Stop animation
          setTimeout(function() {
            $animate.cancel(promise);
          }, 100);
        });
      });
    }
  };
});

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: red;
  transform: translateY(-100%);
}

.header.is-visible {
  transform: translateY(0);
}

.header.is-visible {
  transition: transform 3s;
}

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="header" stop-animation></div>
</body>
</html>

在这个演示中，动画应该在 100 毫秒后停止，因为承诺被取消了。但是，它会正常结束。我想要实现的是停止动画并使其立即跳转到最终状态。

【问题讨论】：

标签： javascript jquery css angularjs animation

【解决方案1】：

如果我理解正确，您可以使用$animate.setClass。删除您的 is-visible 类并添加尚未转换的新 css。

angular.module("app", []);
angular.module("app").directive("stopAnimation", function($animate) {
  return {
    link: function(scope, element) {
      setTimeout(function() {
        
        scope.forceCancel = function(){
          $animate.setClass(element, "is-visible-stopped","is-visible");
        }
        // Start animation
        scope.$applyAsync(function() {
          var promise = $animate.addClass(element, "is-visible");
          
          // Stop animation
          setTimeout(function() {
            $animate.cancel(promise);
          }, 100);
        });
      });
    }
  };
});

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: red;
  transform: translateY(-100%);
}

.header.is-visible {
  transform: translateY(0);
}

.header.is-visible {
  transition: transform 3s;
}

.header.is-visible-stopped {
  transform: translateY(0);
}

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="header" stop-animation> <button style="margin-top:60px" ng-click="forceCancel()"> Cancel</button></div>
</body>
</html>

【讨论】：

【解决方案2】：

也许您可以通过将.is-visible 的转换更改为无来做到这一点。并且在 setTimeout 函数之后，你可以再次添加它。

// Stop animation
setTimeout(function() {
        $(".is-visible").css("transition","none");
      }, 100);
 }

【讨论】：