ngAnimate 不再工作了吗？答案

【问题标题】：Is ngAnimate not working anymore?ngAnimate 不再工作了吗？
【发布时间】：2016-05-10 06:27:24
【问题描述】：

我无法使用简单的角度动画。我做了一个简单的 Plunkr 来展示一下：https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ

HTML

<head>
  <link rel="stylesheet" href="style.css">
  <script src="angular.js"></script>
  <script src="angular-animate.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-app="myApp">
  <div data-ng-controller="myCtrl">
    <p class="fade-fx" data-ng-repeat="text in texts">{{ text.text }}</p>
  </div>
</body>

CSS

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

.fade-fx.ng-enter,
.fade-fx.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-fx.ng-leave,
.fade-fx.ng-enter.ng-enter-active {
  opacity: 1;
}

angular.module('myApp', ['ngAnimate']);
angular.module('myApp')
  .controller('myCtrl', function($scope) {
    $scope.texts = [
      {
        text: 'text1'
      },
      {
        text: 'text2'
      },
      {
        text: 'text3'
      }
    ];
  });

问题是我不确定自己做错了什么。有什么想法吗？

【问题讨论】：

ngAnimate 从未真正奏效过。

标签： javascript css angularjs css-transitions ng-animate

【解决方案1】：

尝试将$timeout 添加到您的初始数组初始化中。看这里： https://plnkr.co/edit/ZB312BKV8vAD3hYttaXZ?p=preview

angular.module('myApp')
  .controller('myCtrl', function($scope, $timeout) {
    $timeout(function() {
      $scope.texts = [{
        text: 'text1'
      }, {
        text: 'text2'
      }, {
        text: 'text3'
    }];
  });
});

编辑：在不相关的注释上，切换会更干净

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

到

.fade-fx {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

【讨论】：

【解决方案2】：

来自 Angular 文档

动画

.enter - 当一个新项目被添加到列表中或当一个项目被添加时过滤后显示

.leave - 当一个项目从列表中被移除或一个项目被移除时过滤掉

.move - 当相邻项目被过滤掉导致重新排序或当项目内容重新排序时

您需要添加一个搜索过滤器以使列表中的查询仅在“index.html”中进行更改

<div data-ng-controller="myCtrl">
  <input type="search" ng-model="q" placeholder="Search">
  <p class="fade-fx" data-ng-repeat="text in texts | filter:q as results">{{ text.text }}</p>
</div>

【讨论】：