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。