Question

我正在尝试在我的angularjs应用中使用动画。但是我无法让它工作 - 角度正在工作，但没有显示动画。

这是一个包含我所有代码的plnkr： http://plnkr.co/edit/wHnztwWmOf95uGfQ0FBd?p=preview

如果您更喜欢在stackoverflow上查看我的代码，那么它是：

的index.html：

<!doctype html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-init="names=['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];">
    <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
      <form class="form-search">
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
            <a href="#"> {{name}} </a>
          </li>
        </ul>
      </form>
    </div>
  </div>
</body>
</html>

app.js：

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules 
        'ngAnimate',        // animations
    ]);
})();

的style.css：

.animate-enter, 
.animate-leave
{ 
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

Answer 1

角度1.3中的动画已更改。 Here是动画工作的更新的plunker。我复制动画的更多信息here。： - ）

关于ng-repeat here的文件说明。

<li class="animate-repeat" ng-repeat="name in names | filter:search">
        <a href="#"> {{name}} </a>
      </li>

AngularJS动画未显示

1 个答案: