【问题标题】:ng-animate not working as intendedng-animate 未按预期工作
【发布时间】:2015-06-13 06:12:33
【问题描述】:

我正在尝试为将新列表项插入列表的过程制作动画。

按照http://www.nganimate.org/的说明进行操作

第一步:我建立一个基类

.animate-enter {
  -webkit-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;
      opacity: 0;   
}

第 2 步:为最终状态建立一个类

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

但是,这似乎没有任何动画效果。

Plnkr 在这里:

http://plnkr.co/edit/lpMdhRpQjf5QlNtfb5dn?p=preview

【问题讨论】:

    标签: angularjs css


    【解决方案1】:

    问题在于 ng-animate 内置于 1.1.5,而不是您使用的版本,即 1.3。如果您使用脚本标签(例如//code.angularjs.org/X.Y.Z/angular-animate.js)将此版本与此版本一起使用,则必须下载或引用 ngAnimate 作为单独的模块。 See Here

    但是here's 一个使用 angular 1.1.5 的代码的笨蛋,我添加了一个搜索过滤器以更好地显示动画。我相信您在定义动画类后也缺少括号。

    此外,transtition 中的不透明度在函数之前的 css 中没有前缀,在函数之后的 all 中也没有前缀。但这似乎是一个错字:

    .animate-enter {
      -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
      -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
      -ms-transition 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
      -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
      transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
        opacity: 0;
    }
    

    【讨论】:

      【解决方案2】:

      除了将 angular-animate.js 脚本包含到您的页面之外,您还需要注入对 ngAnimate 的引用,如下所示:

      var app = angular.module('myApp', ['ngAnimate']);
      

      【讨论】:

        猜你喜欢
        • 2014-10-14
        • 1970-01-01
        • 2018-10-31
        • 2014-08-03
        • 2019-03-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-08-20
        相关资源
        最近更新 更多