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

然而，根本没有错误或动画。关于我做错了什么或如何让动画工作的任何想法？谢谢。

4

1 回答 1

6

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

于 2013-06-22T23:47:15.153 回答