如何使用角度1.2 NG-动画？ [英] How to use ng-animate in angular 1.2?

查看：131
本文介绍了如何使用角度1.2 NG-动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基

角1.1.5 - <一个href=\"http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=$p$pview\">http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=$p$pview - 工程

调升

角1.2.6 - <一个href=\"http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=$p$pview\">http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=$p$pview - FAIL

我觉得我做遵循的文档中的说明 - http://docs.angularjs.org/api/ngAnimate


  

•首先包括角animate.js在HTML


  
  

•通过将它作为一个依赖模块然后加载在你的应用模块


这是相当晚在我的时区，我可能错过了一些东西明显。我的猜测是 - 1.1.5和1.2.6之间的CSS文件不兼容？真的不能告诉...

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

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT;标题＆GT;顶动画＆LT; /标题＆GT;
  ＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
  ＆LT;链接rel =stylesheet属性HREF =style.css文件＆GT;
  ＆LT;链接HREF =// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css的rel =stylesheet属性＆GT;
  ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.6/angular.js＆GT;＆下; /脚本＆GT;
  ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js＆GT;＆下; /脚本＆GT;
  ＆LT;！ -  ^^^负荷动画 - ＆GT;
＆LT; /头＆GT;＆LT;脚本＆GT;
VAR应用= angular.module（'应用'，['ngAnimate']）; //＆LT;  - 相关模块app.controller（Ctrl键，功能（$范围）{
  $ scope.names = ['伊戈尔高塔'，'绿色布拉德，戴夫格迪斯'，'黑直美'，'格雷格·韦伯'，'院长Sofer，韦斯阿尔瓦罗，约翰·斯科特，丹尼尔Nadasi ];
}）;＆LT; / SCRIPT＆GT;＆LT;机身NG控制器=CTRL＆GT;
  ＆LT; D​​IV CLASS =好的风格=的margin-top：30PX;宽度：200像素;溢出：隐藏;＆GT;
    ＆LT;窗​​体类=表格搜索＆GT;
        ＆LT; D​​IV CLASS =输入追加＆GT;
          ＆LT;输入类型=文本NG模型=搜索级=搜索查询的风格=宽度：80px＆GT;
          ＆LT;按钮式=提交级=BTN＆GT;搜索和LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; UL类=净值资产净值药丸NAV叠＆GT;
          ＆LT;李NG-动画='动画'NG重复=名称名称|过滤器：搜索＆GT;
            ＆所述; A HREF =＃＆GT; {{名}}＆LT; / A＆GT;
          ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
    ＆LT; /表及GT;
  ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

非常感谢您的帮助！


解决方案

下面是您plunker ... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=$p$pview

在角1.2+，你不需要再申报NG-动画指令。动画，可以单独用CSS来添加。因此，对于你的榜样，您可以删除NG-动画指令，并给该元素的CSS类，因此改变... 

 ＆LT;李NG-动画='动画'NG重复=名称名称|过滤器：搜索＆GT;至...＆LT;李班=动画NG重复=名称名称|过滤器：搜索＆GT;

，然后更新您的CSS来... 

  .animate.ng进入，
.animate.ng休假
{
....animate.ng-leave.animate.ng休假活跃，
.animate.ng输入{
....animate.ng-enter.ng进入活跃，
.animate.ng休假{
...

角只会增加NG-进入，NG-躲，NG-离开..等类的元素和动画的生命周期，这将触发CSS动画中适当地将其删除。有哪些指令支持，在文档动画类下的用法的列表。在这个例子中，我们动画纳克重复，所以NG-进入，NG休假和NG-MOVE课程将在适当的时候加入到我们的元素，我们可以将动画将它们与CSS。

Base

angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS

Upped

angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL

I think I did follow the instructions from the docs - http://docs.angularjs.org/api/ngAnimate

• First include angular-animate.js in your HTML

• Then load the module in your application by adding it as a dependent module

It's quite late in my timezone and I probably miss something obvious. My guess would be - CSS file between 1.1.5 and 1.2.6 is not compatible? Cannot really tell...

Anyway here is the code form upped plunker, I included some comments to emphasise that I followed instructions from docs:

<!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>

Many thanks for help!

解决方案

Here is a working version of your plunker... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

In Angular 1.2+, you don't need to declare the ng-animate directive anymore. Animations can be added with css alone. So for your example, you can remove the ng-animate directive and give the element a css class, so change...

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

to...

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

and then update your css to ...

.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 will simply add the ng-enter, ng-hide, ng-leave.. etc. classes to the element and remove them appropriately during the animation lifecycle, which will trigger the css animations. There is a list of which directives support which animation classes in the docs under 'Usage'. In this example, we are animating ng-repeat, so the ng-enter, ng-leave and ng-move classes will be added to our element at the appropriate time and we can attach animations to them with css.

这篇关于如何使用角度1.2 NG-动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆