【发布时间】:2013-06-19 18:20:45
【问题描述】:
我正在使用 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 版本中不可用。
-
@MichalCharemza 哇,你说得对……我在 1.0.7。刚刚升级到 1.1.5,动画立即生效。谢谢!
标签: javascript css angularjs ng-animate