Angular 1.3 css 动画不工作

Question

我是 angular 的新手，我几乎复制粘贴了文档中的示例，但我无法让它工作。
我在网上搜索过，但我遇到的例子是 angular...

的旧版本

html:

<body ng-controller="MainCtrl">
    <button ng-click="shown = true">Fade in</button>
    <button ng-click="shown = false">Fade out</button>
    <p ng-if="shown" class="fade-in-animation">Hello!</p>
</body>

js:

angular.module('plunker', []).controller('MainCtrl', function($scope) {
    $scope.shown = false
});

CSS:

.fade-in-animation.ng-enter, .fade-in-animation.ng-leave {
    -webkit-transition:2s linear all;
    transition:2s linear all;
}

.fade-in-animation.ng-enter {opacity: 0;}
.fade-in-animation.ng-enter.ng-enter-active {opacity: 1;}
.fade-in-animation.ng-leave {opacity: 1;} 
.fade-in-animation.ng-leave.ng-leave-active {opacity: 0;}

Answer 1

除了加载 angular-animate.js 你还需要添加 ngAnimate 模块作为依赖。

在你的情况下，而不是：

angular.module('plunker', [])

做：

angular.module('plunker', ['ngAnimate'])

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

Angular 1.3 css 动画不工作

Angular 1.3 css animation not working

javascript

angularjs