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

Posted 2023-03-06

技术标签:

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

有没有办法？

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 毫秒后停止，因为承诺被取消了。但是，它会正常结束。我想要实现的是停止动画并使其立即跳转到最终状态。

【问题讨论】：

【参考方案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);

【讨论】：

以上是关于停止由 $animate.addClass 启动的动画的主要内容，如果未能解决你的问题，请参考以下文章

MySQL服务启动：某些服务在未由其他服务或程序使用时将自动停止

本地计算机上的MySQL80服务启动后停止，某些服务在未由其他服务或者程序使用时将自动停止亲测有效

mysql错误--本地计算机上的mysql服务启动停止后,某些服务在未由其他服务或程序使用时将自动停止

oracle11g出现错误，监听服务启动后停止。某些服务未由其他服务或程序使用时将自动停止

本地计算机上的SQL Server(MSSQLSERVER)服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止