angularjs - 带有 ng-animate 的 Ng-view 似乎没有动画

Question

我有一个带有 ng-view 的 div 元素，效果很好。我一直在尝试使用 CSS 过渡做一个简单的幻灯片，似乎我所有的动画工作都是无用的，元素只是眨眼间出现/消失。尝试了 AngularJS 1.1.4 和 1.1.5，它没有帮助。任何人的想法？

这是代码：

主页.html

    <div ng-view ng-animate="'animate'"></div>

动画.css

.animate-enter, .animate-leave {
  -webkit-transition:all 2s ease;
  -moz-transition:all 2s ease;
  -o-transition:all 2s ease;
  transition:all 2s ease;
}

.animate-enter {
    left: -100%;
}

.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}

.animate-leave.animate-leave-active {
    left: 100%;
}

Answer 1

您需要添加一个 position:relative 或 position:absolute 甚至 position:fixed 到 .animate-enter,.animate-leave css 块。

我设置了一个 plunker 在 ng-view http://plnkr.co/edit/eT2RyZm5bBjlLTOnAO8R?p=preview上演示这个

Answer 2

您是否尝试过像这样更改 home.html（ng-view 标签）？

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

Answer 3

很抱歉给大家带来麻烦，再次感谢您的帮助。

这是我从别人那里编辑的代码，当我为最新的不稳定版本更新本地 angular.js 文件时，我最终发现 home.html 获取了在线文件（链接到稳定版本）而不是本地的。

这几乎解决了这个问题：}