ng-animate 没有按预期工作答案

【问题标题】：ng-animate not working as expectedng-animate 没有按预期工作
【发布时间】：2014-10-14 01:10:38
【问题描述】：

当布尔变量设置为 true 时，我正在尝试对元素进行简单的淡入处理。之前它工作正常，直到我将我的AngularJS 版本更改为1.2.15。我做错了什么吗？

<div ng-app="myApp" ng-controller="myController">
    {{ready}}
    <div ng-show="ready" ng-animate="{show:'animate-show'}">hello</div>
</div>

$scope.ready = false;

function displayBox() {
    $scope.ready = true;
    $scope.$apply();
}
setTimeout(displayBox, 1000);

【问题讨论】：

您是否包含angular-animate
你应该这样做吗？大概就是这样。
是的，有一个单独的脚本。加上那个，做一个依赖引用，你应该很好
嗯。仍然不起作用，除非我错误地添加了依赖项。 jsfiddle.net/QErPe/117
在animation查看这篇文章

标签： javascript css angularjs ng-animate ng-show

【解决方案1】：

Angular 1.2.x 中更改了动画语法。现在您必须使用 ngAnimate 模块作为依赖项并更改使用 CSS 应用动画的方式。您的 HTML 变为：

<div class="animate-show" ng-show="ready">hello</div>

在您的情况下，您只需要这个简单的 CSS：

.animate-show {
    opacity: 1;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}
.animate-show.ng-hide {
    opacity: 0;
}

演示：http://plnkr.co/edit/nHZ6P6evV2Ee4NtIeMZY?p=preview

【讨论】：

优秀的研究！我知道这是沿着这些路线的东西，我只是找不到任何文档。你是最棒的！
这里是ngShow documentation，里面也有关于动画的信息。