模型更改時的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和ngClass動畫鈎子示例非常接近，因此請看一下該示例。