带有 css3 过渡的角度淡入淡出动画

Question

我正在尝试使用 ngAnimate 和 css3 转换在单击链接时淡入/淡出 div。我有以下内容，但它不起作用。 div 显示/隐藏，但不会淡入或淡出。我哪里错了：

.fade-in-out.ng-add {
  transition: 1s linear all;
  opacity: 0;
}

.fade-in-out.ng-add-active {
  opacity: 1;
}

.fade-in-out.ng-remove {
  transition: 1s linear all;
  opacity: 1;
}

.fade-in-out.ng-remove-active {
  opacity: 0;
}

div 最初是隐藏的 (showMe=false)。页面上有一个将showMe 设置为true 的链接。

<div ng-show="showMe" class="fade-in-out">          
    <div style="float: right; cursor: pointer;" ng-click="showMe=false">x</div>
    blablabla
</div>

请注意，我使用的是 angular 1.2.26。

Answer 1

要使用的正确类是：

.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

在你的情况下，这就足够了：

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

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

请注意，angular-animate.js 必须加载，ngAnimate 必须作为依赖模块添加。