如何在angular 1.2中使用ng-animate？

一尘不染

如何在angular 1.2中使用ng-animate？

angularjs

基础

角1.1.5- http
://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?
p= preview-作品

上调

角度1.2.6- http
://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?
p= preview-失败

我认为我确实遵循了文档中的说明-http:
//docs.angularjs.org/api/ngAnimate

•首先在HTML中包含angular-animate.js

•然后通过将模块添加为从属模块来将其加载到应用程序中

在我所在的时区已经很晚了，我可能会错过一些显而易见的事情。我的猜测是-1.1.5和1.2.6之间的CSS文件不兼容？不能真正告诉…

反正这里是代码形式调升 plunker，我包括一些意见强调的是，我也跟着从文档的说明：

<!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://code.angularjs.org/1.2.6/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
  <!-- ^^^ load animate -->
</head>

<script>
var app = angular.module('app', ['ngAnimate']); // <-- dependent module

app.controller('Ctrl', function($scope) {
  $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];
});

</script>

<body ng-controller="Ctrl">
  <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>
</body>
</html>

非常感谢您的帮助！

阅读 269

2020-07-04

共1个答案

一尘不染

这是您的punker的工作版本…
http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

在Angular 1.2+中，您不再需要声明ng-animate指令。可以单独使用css添加动画。因此，对于您的示例，您可以删除ng-
animate指令，并为该元素提供一个css类，因此请更改…

<li ng-animate="'animate'" ng-repeat="name in names | filter:search">

to...

<li class="animate" ng-repeat="name in names | filter:search">

然后将您的CSS更新为…

.animate.ng-enter, 
.animate.ng-leave
{ 
...

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
...

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
...

Angular会简单地将ng-enter，ng-hide，ng-leave
..等类添加到元素中，并在动画生命周期中适当地将其删除，这将触发css动画。在“用法”下的文档中，列出了哪些指令支持哪些动画类。在此示例中，我们为ng-
repeat设置了动画，因此ng-enter，ng-leave和ng-move类将在适当的时候添加到元素中，并且可以使用CSS将动画附加到它们上。

2020-07-04