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。