AngularJS：爲什麼在ng-hide /顯示轉換期間不會添加動畫類

我正在嘗試做一些動畫工作，但出於某種原因，在ng-show/ng-hide轉換期間不會附加適當的類。我附上了這個動畫，顯示他們沒有被附加。我究竟做錯了什麼？AngularJS：爲什麼在ng-hide /顯示轉換期間不會添加動畫類

我應該指出，其他動畫工作，像那些連接到ui-view。

CodePen演示： http://codepen.io/anon/pen/OyoyYX?editors=101

如果您使用的是Chrome，看看調試器的瀏覽器。你可以看到輸入/ etc類沒有被連接。

UPDATE：

GitHub上的這種情況似乎與： https://github.com/angular/angular.js/issues/12267

來源

2015-10-29 ymerej

你能爲我們提供一個小提琴？ –

@TúlioCastro更新於codepen。 – ymerej

這是默認的角度顯示/隱藏行爲。 ng-hide類使用顯示：無隱藏元素。但顯示：沒有不能被動畫。只需使用display：block和opacity：0覆蓋此功能即可完成您的動畫。看看你的榜樣，我改變：

.ng-fluid{ 
    transition:1s linear all; 
    opacity:1; 
} 
.ng-fluid.ng-hide{ 
    opacity:0; 
    display:block; 
} 
.ng-hide-add, .ng-hide-remove{ 
    position: absolute; 
}

http://codepen.io/anon/pen/LpJGwR?editors=101

來源

2015-11-04 18:15:40

您的解決方案工作。看起來你並不需要'display：block;'實際上。我想我不明白爲什麼角度決定使用ng-enter/ng-leave與ng-remove/ng-add – ymerej

好的觀察，在這種情況下，這是因爲元素在動畫結束後將不顯示。所以在動畫過程中，元素依然存在並且可以進行動畫製作。 –

謝謝@Tulio，這解釋了一點。我也發現這個文檔在這裏很有幫助：https：//docs.angularjs.org/api/ngAnimate。它幫助解釋了添加/刪除與輸入/離開。 – ymerej

AngularJS：爲什麼在ng-hide /顯示轉換期間不會添加動畫類

回答

相關問題