有没有办法停止由 $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 毫秒后停止，因为 promise 被取消了。但是，它正常完成。我想要实现的是停止动画并使其立即跳转到最终状态。
最佳答案
如果我理解正确，您可以使用 $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>关于javascript - 停止由 $animate.addClass 启动的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37718528/