停止由$ animate.addClass啓動的動畫

有沒有辦法停止由$ 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後停止，因爲承諾被取消。然而，它正常結束。我想要實現的是停止動畫，並立即跳轉到最終狀態。

來源

2016-06-09 Tamás Pap

如果我理解正確，您可以使用$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>

來源

2016-06-09 07:12:37

也許你可以通過改變.is-visible的過渡到無。 setTimeout函數完成後，您可以再次添加它。

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

來源

2016-06-09 07:08:29 kkakkurt

停止由$ animate.addClass啓動的動畫

回答

相關問題