Angular.js: ng-if berperilaku aneh dengan animasi keyframe CSS tak terbatas

Masalahnya adalah ngAnimate menganggap animasi tak terbatas Anda ada untuk semua acara animasi yang digunakan (seperti masuk, keluar, dan sebagainya). Dan karena ini adalah animasi tak terbatas maka kejadian CSS tidak akan pernah diaktifkan sampai hitungan mundur terakhir telah berlalu yaitu setelah 7,5 detik (5 x 1,5 == 7,5).

Anda harus memberi tahu ng-animate untuk tidak menganimasikan animasi latar belakang tanpa batas dengan mengganti kelas CSS .ng-animate pada elemen dan membatalkan animasi keyframe.

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ?p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

Sayangnya mendeteksi gaya dan kelas CSS dalam JavaScript sangat terbatas. Dengan versi AngularJS sebelumnya, kami memiliki aturan bahwa Anda hanya dapat menentukan animasi/transisi CSS pada properti animasi (seperti .ng-enter, .ng-leave, dan sebagainya), tetapi hal itu menyebabkan lebih banyak masalah daripada yang diselesaikan. Jadi dalam hal ini Anda perlu melakukan yang sebaliknya.

PS. Yang Anda butuhkan hanyalah awalan -webkit- dan properti standar animation karena semua vendor lain menghapus awalan mereka.

Keren, terima kasih atas solusinya.

Hal multi-salinan-sekaligus masih tampak seperti bug bagi saya: Saya menulis kode saya dengan asumsi bahwa elemen yang menggunakan ng-if ada sekali atau tidak ada sama sekali, dan saya mengharapkan kerangka kerja untuk mencegahnya agar tidak mudah rusak karena kesalahan noob yang tidak disengaja. Harap perbaiki saya jika saya salah memahami bagaimana ng-if (atau ng-switch ) dimaksudkan untuk berfungsi.

Banyak salinan ada di sana karena animasinya masih berlangsung. Dan $animate memiliki animasi catch-all untuk keyframe/transisi yang terjadi setelah durasi * 1.5 Anda berakhir. Itu sebabnya mereka menghilang setelah beberapa saat.

Kode ng-if Anda benar. Dan ya itu hanya ada ketika benar. Tetapi internal membuat salinan elemen baru setiap kali ekspresi menjadi true lagi. Tetapi karena animasi tergantung pada elemen yang lebih lama, maka itu belum dihapus sampai tangkapan semua animasi masuk.

Dan ng-switch dan ng-if beroperasi dengan cara yang sama. Hanya ng-switch yang memiliki banyak elemen, bukan hanya satu.