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

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

我有点像

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

CSS

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

添加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动画更改为类

这是演示

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

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

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