javascript – 停止由$animate.addClass启动的动画

2019年7月21日 148次阅读

有没有办法停止$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>

在此演示中,动画应在100ms后停止,因为承诺已取消.但是,它正常完成.我想要实现的是停止动画并使其立即跳转到最终状态.

最佳答案 如果我理解正确,你可以使用$animate.setClass.删除您可见的类并添加未转换的新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>
点赞