Question

我有一个带有ng-view的div元素，效果非常好。我一直在尝试用CSS Transition做一个简单的幻灯片，看起来我的所有动画都没用，而且元素只是眨眼就出现/消失了。试过AngularJS 1.1.4和1.1.5，它没有帮助。任何想法？

以下是代码：

home.html的

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

animations.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

您需要添加一个位置：relative或position：绝对位置或偶数位置：固定为.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获取了在线文件（已链接到稳定版本））而不是当地人。

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

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

3 个答案: