Ng-animate在AngularJS中不起作用?

时间:2013-06-22 20:56:33

标签: javascript css angularjs ng-animate

我正在使用Phonegap和AngularJS开发移动应用。我目前正在开发和测试本地wampserver以便于使用。

我正在尝试ng-animate ng-view处理我的 <body ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></body> ,以便动画更改类似于移动应用的观看次数。我遵循的任何指南或我使用的任何代码似乎都没有做任何事情。没有错误或动画。

这是我当前的ng-view代码:

.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

这是我目前用于ng-animate的CSS:

{{1}}

但是,根本没有错误或动画。关于我做错了什么或者我如何让动画工作的任何想法?感谢。

1 个答案:

答案 0 :(得分:6)

感谢Michal Charemza指出了我的问题......我使用的是AngularJS的最新稳定版本1.0.7,而ng-animate仅在不稳定的版本中。我从here下载了1.1.5,上面的动画代码立即生效。