Question

当布尔变量设置为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);

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

ng-animate无法按预期工作

1 个答案:

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