AngularJS中的Ng-animate无法正常工作?

3

我正在使用Phonegap和AngularJS开发移动应用程序。目前为了方便,我只在本地wampserver上进行开发和测试。

我正在尝试使ng-animate在我的ng-view上工作,以便像移动应用程序一样动画切换视图。但是我遵循的任何指南或使用的任何代码似乎都没有起作用。没有错误或动画效果。

以下是我的当前ng-view代码:

    <body ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></body>

这是我的当前ng-animate的CSS:

.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;
}

然而,没有任何错误或动画。有什么想法我做错了什么或者如何让动画工作?谢谢。


你能确认一下你正在使用哪个版本的AngularJS吗?通过ngAnimate进行动画只在不稳定的版本中可用,而不是最新稳定版本1.0.7中。 - Michal Charemza
@MichalCharemza 哇,你说得对...我使用的是1.0.7版本。刚刚升级到1.1.5版本,动画立即生效了。谢谢! - Jakemmarsh
1个回答

6

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


谢谢,这很好用!需要在动画感觉方面进行一些微调,但是概念似乎是可行的。 - dmackerman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接