Question

将animate.css与AngularJS一起使用。我尝试在ng-click上将元素应用于元素，但元素没有更新。我正在尝试多种方法（使用函数等更新范围值），没有任何乐趣。基本上，我想添加fadeIn＆＃39; fadeOut＆＃39;和＆＃39; flipIn＆＃39;，＆＃39; flipOut＆＃39;单击按钮1或按钮2时相应的动画元素。

<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>

在控制器中：

$scope.animate = true;

$scope.setAnimateClass = function (animate, classIn, classOut) {
  if (animate) {
    $scope.animateClass = classIn;
  } else {
    $scope.animateClass = classOut;
  }
};

Answer 1

您必须将班级名称放在单引号中。我举了一个简单的例子。

＆＃13;

ImageSource myImageSource = ImageSource.FromResource("resources.image.png");

＆＃13;

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";
    
    }
  
  
});

＆＃13;

.fadeIn{
  color: red;
  }

.fadeOut{
  color:blue;
  }
.flipIn{
  font-size:20px;
  }

.flipOut{
  font-size:40px;
  }

＆＃13;

Answer 2

你有多余的双重曲线，改为：

<h1 class="text-center animated" ng-class="{'classIn': animate, 'classOut': !animate}">Animation</h1>

Answer 3

试试这个：

<h1 class="text-center animated" 
    ng-class="{classIn: animate, classOut: !animate}">Animation</h1>

Answer 4

Angular也可以将数组作为类：https://docs.angularjs.org/api/ng/directive/ngClass

因此，您可以使用控制器构建阵列并将其绑定到ngClass

ng-class="classArray"

$scope.classArray = [...]

AngularJS - 动态更新ng-class名称

4 个答案: