mas*_*nyo 4 javascript css angularjs ng-class
我正在使用animate.css在同一个元素上制作动画.我在添加它后删除类时遇到问题.
HTML
<form ng-submit="animate()" ng-controller="AnimateCtrl">
<input type='text' ng-model="some">
</form>
<div ng-class="{shake:animation.shake}" class="animated">
角
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
};
})
如何在动画后删除课程？
mcc*_*inz 11
将animation.shake的值更改为false将删除该类.将其更改为true会添加该类.这是ng-class如何运作的基础.如果您希望动画运行一段时间,则需要使用$ timeout切换.你的代码很难说清楚.以下示例使用$ timeout删除该类,该超时在2000毫秒后执行.
例如 http://plnkr.co/edit/Wtxkrv2nIqSLNfEsvCyI?p=preview
CSS .red {color:red; }
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>
| 归档时间： |
|
| 查看次数： |
15598 次 |
| 最近记录： |