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

【问题标题】：Ng-view with ng-animate doesn't seem to animate带有 ng-animate 的 Ng-view 似乎没有动画
【发布时间】：2013-07-25 20:42:09
【问题描述】：

我有一个带有 ng-view 的 div 元素，效果很好。我一直在尝试使用 CSS 过渡做一个简单的幻灯片，似乎我所有的动画工作都是无用的，元素只是眨眼间出现/消失。尝试了 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%;
}

【问题讨论】：

控制器在哪里？

标签： angularjs css-transitions ng-animate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，似乎不起作用。还尝试了 CSS 动画，但它似乎不起作用。

【解决方案3】：

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

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

这几乎解决了问题：}

【讨论】：