javascript - 模型更改时的 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 赋值在 Controller 内是不够的。

如果您查看 Angular 动画的文档 https://docs.angularjs.org/api/ngAnimate - 你会看到只有一组特定的指令有动画 Hook 。这些指令中的每一个通常都有一对进入/离开或添加/删除动画。这意味着 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 类.这最终非常接近 Class and ngClass animation hooks Angular 动画开发人员指南中的示例，因此请查看该示例。