gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:13:50 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com