ng-animate无法正常工作

时间:2015-06-12 20:30:57

标签: css angularjs css3

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

按照http://www.nganimate.org/

上的说明操作

第1步:我建立基类

.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

2 个答案:

答案 0 :(得分:0)

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

但是here's使用角度1.1.5代码的一个plunker,我添加了一个搜索过滤器来更好地显示动画。在您定义动画类后,我相信您也错过了一个括号。

此外,您在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;
}

答案 1 :(得分:0)

除了将angular-animate.js脚本包含到页面中之外,您还需要按如下方式注入ngAnimate:

#!/usr/bin/python

import thread
import time

# Define a function for the thread
def print_time( threadName, delay):
   count = 0
   while count < 5:
      time.sleep(delay)
      count += 1
      print "%s: %s" % ( threadName, time.ctime(time.time()) )

# Create two threads as follows
try:
   thread.start_new_thread( print_time, ("Thread-1", 2, ) )
   thread.start_new_thread( print_time, ("Thread-2", 4, ) )
except:
   print "Error: unable to start thread"