css - 如何在我的案例中创建淡入淡出动画

Question

我正在尝试为 ng-show 创建淡入淡出功能。我读过很多帖子，但似乎他们使用的是旧的 Angular 版本。

我有类似的东西

<button ng-click="play()"></button>
<div id='wrapper' ng-show="animate" 
                  ng-animate="{show:'animate-show', hide:'animate-hide'}">
TEST HERE</div>

JS

$scope.animate = false;
$scope.play = function() {
    $scope.animate = true;   
}

CSS

.animate-show, .animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
  opacity:0;
}

以上代码只显示和隐藏元素，不提供动画。有谁知道如何制作动画吗？谢谢!

Answer 1

添加angular-animate.js文件

添加依赖模块为

 angular.module('myApp', ['ngAnimate']);

并修改css

.animate-show,
.animate-hide {
   -webkit-transition:all linear 1s;
   -moz-transition:all linear 1s;
   -ms-transition:all linear 1s;
   -o-transition:all linear 1s;
   transition:all linear 1s;
}

.animate-show.ng-hide-remove,
    .animate-hide.ng-hide-add.ng-hide-add-active {
    opacity: 0;
    display: block !important;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
     opacity: 1;
     display: block !important;
 }

将 ng-animate 更改为 class

<div id='wrapper' ng-show="animate" class="animate-show animate-hide">TEST HERE</div>

这是演示 Plunker