Angular Ng-Animate - 更平滑的过渡

Question

当用户点击选项卡时，使用ng-animate提供一些转换。

只需使用

.ng-enter{
    transition:0.50s;
    opacity: 0;
 }
.ng-enter-active{
    opacity: 1;
 } 

这是一种享受。但是，第一次点击它有点粘。

在转换之前正在转换为显示器的视图，因此您几乎可以看到它两次。这只发生在第一轮，在随后的访问中，过渡完美。

有没有办法让动画第一次变得更流畅？使用包含ng-include的div显示选项卡。

Answer 1

您必须在制表符元素上定位动画，如下所示：

.tab.ng-enter {
    transition:0.5s linear all;
    opacity:1;
}
.tab.ng-enter.ng-enter-active {
    opacity:0;
}

ngAnimate（如ngLeave，ngEnter等等）类将被添加到视图中出现/消失的每个元素中，因此在您的情况下，需要将动画限制为仅一个元素。

您也可以看到documentation。