角度 1.3 CSS 动画不起作用

Angular 1.3 css animation not working

本文关键字：动画 不起作用 CSS 角度      更新时间：2023-09-26

我是角度的新手，我几乎已经将示例从文档中复制粘贴，但我无法让它工作。
我在网上搜索过，但我遇到的例子是旧版本的角度......

演示：普伦克链接

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

除了加载angular-animate.js之外，还需要将ngAnimate模块添加为依赖项。

在您的情况下，而不是：

angular.module('plunker', [])

做：

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

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

相关文章：