javascript - ng-animate 没有按预期工作

Question

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

Here is a sample JSFiddle.

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

Answer 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