使用 animate.css与 AngularJS。我正在尝试将一个类应用于 ng-click 上的元素,但该元素没有得到更新。我尝试了多种方法(使用函数更新范围值等),但没有任何乐趣。基本上,我想在单击按钮 1 或按钮 2 时相应地向动画元素添加 'fadeIn'、'fadeOut' 和 'flipIn'、'flipOut'。
<button ng-click="animate = !animate; classIn = 'fadeIn'; classOut = 'fadeOut'" class="btn btn-default">Fade</button>
<button ng-click="animate = !animate; classIn = 'flipIn'; classOut = 'flipOut'" class="btn btn-default">Flip</button>
<div class="animated-wrapper">
<h1 class="text-center animated" ng-class="{'{{classIn}}': animate, '{{classOut}}': !animate}">Animation</h1>
</div>
谢谢
编辑: 稍微修改一下代码后,我想出了一个解决方案(稍微修改一下@hadiJZ 的回答):
<button ng-click="setAnimateClass(animate = !animate, 'fadeIn', 'fadeOut')" class="btn btn-default">Fade</button>
<button ng-click="setAnimateClass(animate = !animate, 'bounceIn', 'bounceOut')" class="btn btn-default">Bounce</button>
<div class="animated-wrapper">
<h1 class="text-center animated" ng-class="animateClass">Animation</h1>
</div>
在 Controller 中:
$scope.animate = true;
$scope.setAnimateClass = function (animate, classIn, classOut) {
if (animate) {
$scope.animateClass = classIn;
} else {
$scope.animateClass = classOut;
}
};
最佳答案
您必须将类名放在单引号中。 我举个简单的例子。
var myapp = angular.module('myapp', []);
myapp.controller('Ctrl', function ($scope) {
var vm = this;
vm.animate = true;
vm.cssVal = "";
vm.addFadeClass = function(animate){
if(animate)
vm.cssVal = "fadeIn";
else
vm.cssVal = "fadeOut";
}
vm.addFlipClass = function(animate){
if(animate)
vm.cssVal = "flipIn";
else
vm.cssVal = "flipOut";
}
});
.fadeIn{
color: red;
}
.fadeOut{
color:blue;
}
.flipIn{
font-size:20px;
}
.flipOut{
font-size:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="Ctrl as vm">
<button ng-click="vm.addFadeClass((animate = !animate))" class="btn btn-default">Fade</button>
<button ng-click="vm.addFlipClass((animate = !animate))" class="btn btn-default">Flip</button>
<div class="animated-wrapper">
<h1 class="text-center animated" ng-class="vm.cssVal" >Animation</h1>
</div>
</div>
关于html - AngularJS - 动态更新 ng 类名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35941398/