Question

我是angularjs的新手。我正在尝试使用rails的angularjs（使用＆＃34; angularjs-rails＆＃34; gem）。我在使用ngAnimate时遇到了麻烦。功能正常，即正确安装角度和＆＃34; addEntry＆＃34;函数会添加新条目，但动画不起作用。我不确定我在这里缺少什么。

app = angular.module("MyApp", ['ngAnimate'])

@MainCtrl = ($scope) ->
  $scope.entries = [{name: "Dummy1"}, {name: "Dummy2"}]

  $scope.addEntry = ->
    $scope.entries.push({name: "Dummy3"})

这是html文件：

<div ng-controller="MainCtrl">
  <button ng-click="addEntry()"></button>
  <div ng-repeat="entry in entries" ng-animate="'demo'">
    <a>{{entry.name}}</a>
  </div>
</div>

这是支持ngAnimate的CSS：

.demo-enter {
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
  background: #000;
}

.demo-enter.demo-enter-active {
  background: #ccc;
}

Answer 1

ng-animate属性在1.2中已弃用，不再使用。相反，动画现在是基于类的。

如果您希望将ng-repeat输入动画命名为＆＃39; demo＆＃39;你必须按照一个特殊的命名约定用一些额外的类来装饰它：

.demo.ng-enter {
  transition: all linear 500ms;
  opacity: 0;
}

.demo.ng-enter-active {
  opacity: 1;
}

然后只需输入＆＃39;演示＆＃39;包含ng-repeat的元素上的类：

<div ng-repeat="entry in entries" class="demo">

演示：http://plnkr.co/edit/kNeXtl6TpGNvtQEpErwh?p=preview

关于这个问题的良好来源：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 2

如果您想要淡入淡出动画，请在设置类中将不透明度设置为0，并在活动时将不透明度设置为1

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

angularjs：ngAnimate不工作

2 个答案: