Question

我一直在谷歌和Stackoverflow上搜索，但没有找到我要找的东西。

这就是我所拥有的。我保证我正在努力搞清楚这一点。

问题如下：我有动画使用列表。当我使用超时将项目添加到列表时，它们会正确地设置动画。但是，“title”变量是一个字符串。我希望在此值更改时应用动画。我现在仍然无能为力地知道如何让它发挥作用。我知道我可以为ng-hide添加动画的css类，但我仍然不太明白如何适应这里。任何帮助都提前感谢。请赐教。你不必给我代码。即使是如何实现这一目标的高级描述也足够了。

// app.js
(function() {
  var app = angular.module("MyApp", ["ngAnimate"]);
  // route configuration
}());

// homecontroller.js
(function() {
  var app = angular.module("MyApp");
  app.controller("HomeController", ["$scope","$timeout", homeController];

  function homeController($scope, $timeout) {
    $scope.items = ["Frodo", "Bilbo", "Merry", "Pippin", "Sam"];
    $scope.title = "The Hobbits";

    $timeout(function() {
      $scope.title = "The Hobbits and the Wizard";
      $scope.items.unshift("Aragorn","Faramir","Boromir");
    }, 5000);
  }
}());

一些HTML

<!-- view for HomeController -->
<h1>{{ title }}</h1>
<div ng-controller="HeaderWebpart.HeaderController">
  <div class="testClass" style="display:block;" ng-repeat="item in items">{{ item }}</div>
</div>

和CSS

div.testClass.ng-enter {
  -webkit-animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
  animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
  display: block;
  position: relative;
}
@-webkit-keyframes enter {
    from {
      opacity: 0;
      height: 0px;
      left: -70px;
    }
    75% {
      left: 15px;
    }
    to {
      opacity: 1;
      height: 20px;
      left: 0px;
    }
}
div.testClass.ng-enter-active {
    opacity: 1;
}

Answer 1

您目前没有任何动画逻辑适用于<h1>元素，只需在控制器中为title分配值是不够的。

如果你看一下角度动画的文档 https://docs.angularjs.org/api/ngAnimate - 您将看到只有一组特定的指令具有动画挂钩。这些指令中的每一个通常都具有输入/离开或添加/删除动画的配对。这意味着angular会为这些元素添加和删除特定的CSS类，您可以使用这些类来执行动画，类似于您在上面使用ng-repeat指令和testClass动画所做的操作：

.yourAnimationCSSClass.ng-enter { }
   => what your element should look like before the animation starts
      what the change should be and the duration

.yourAnimationCSSClass.ng-enter.ng-enter-active { }
   => ending(stable) state for your animation, ie. what the 
      element should look like when you're done

... ng-leave和ng-leave-active的工作方式类似。

因此，要为<h1>元素解决此问题，应用动画的一种方法是使用ngClass选择性地设置CSS类。这最终与Angular开发人员动画指南中的Class and ngClass animation hooks示例非常接近，因此请查看该示例。

模型更改时的AngularJS动画

1 个答案: