javascript Ng-class - 在添加到 DOM 后删除一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23122107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ng-class - remove a class after it is added to the DOM
提问by masanorinyo
I am using animate.css to make animation on the same element. I am having a problem in removing the class after adding it.
我正在使用 animate.css 在同一个元素上制作动画。添加课程后，我在删除课程时遇到问题。
HTML
HTML
<form ng-submit="animate()" ng-controller="AnimateCtrl">
<input type='text' ng-model="some">
</form>
<div ng-class="{shake:animation.shake}" class="animated">
Angular
角
myapp.controller(function($scope){
var animation = $scope.animation = {
shake:false
};
$scope.animate=function(){
//remove the class first and add it back again
animation.shake = false
animation.shake = true
};
})
How can I remove the class after animation?
如何在动画后删除类？
回答by mccainz
Changing the value of animation.shake to false removes the class. Changing it to true adds the class. That is the foundation of how ng-class works. If you are wanting your animation to run for some interval you need to toggle using $timeout. Difficult to tell by your code. The following example removes the class using a $timeout which executes after 2000 milliseconds.
将 animation.shake 的值更改为 false 会删除该类。将其更改为 true 添加类。这是 ng-class 工作原理的基础。如果您希望动画运行一段时间，则需要使用 $timeout 进行切换。很难通过您的代码判断。以下示例使用在 2000 毫秒后执行的 $timeout 删除类。
For example http://plnkr.co/edit/Wtxkrv2nIqSLNfEsvCyI?p=preview
例如 http://plnkr.co/edit/Wtxkrv2nIqSLNfEsvCyI?p=preview
CSS.red{ color:red; }
CSS.red{ 颜色：红色；}
HTML And Code
HTML 和代码
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="test">
<h1>Hello Plunker!</h1>
<span ng-class="{'red':animation.shake}">Hello World</span>
<button ng-click="shake()">red</button>
<script>
var app=angular.module("app",[]);
app.controller("test",function($scope,$timeout){
$scope.animation={shake:false};
$scope.shake=function(){
$scope.animation.shake=true;
$timeout(function(){
$scope.animation.shake=false;
},2000,true);
}
});
angular.bootstrap(document,["app"]);
</script>
