模型更改时的AngularJS动画

Question

我一直在 Google 和 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 示例非常接近，因此请查看该示例。