javascript - Bolehkah saya mematikan sementara semua peralihan/animasi CSS3 semasa sebuah elemen dibina?


Saya telah mencipta Menu yang agak kompleks untuk sebuah laman web. Menu ini hidup dari sejumlah besar animasi yang berasaskan CSS3. Walau bagaimanapun, apabila saya menavigasi ke halaman yang berbeza, menu itu sepatutnya dibina pada permulaan - dan tanpa semua animasi, tetapi dilakukan secara JS dan bukan di sisi pelayan.

Sekarang saya tertanya-tanya bagaimana saya boleh mematikan semua peralihan/animasi sepenuhnya buat sementara, sehingga menu itu dibina.

Saya terfikir untuk membuat subclass yang menimpa animasi tetapi nampaknya ia tidak berfungsi, kerana ia sentiasa menggunakan animasi/peralihan yang ditakrifkan dalam kelas asas?

Jawapan #1

Saya cadangkan menggunakan animasi/transisi anda melalui kelas yang ditambah oleh JavaScript selepas menu dibina.

Terdapat sifat animation-play-state yang boleh menghentikan animasi, tetapi itu hanya muncul (dengan awalan) di Safari 5 dan Chrome 4 (berbanding dengan Safari 4 dan Chrome 2 untuk sifat animasi yang lain), dan saya tidak pasti jika ia akan berfungsi untuk tujuan anda.

Jawapan #2

Anda boleh menetapkan transition-duration kepada 0s semasa membina menu dan kemudian menetapkannya kembali kepada nilai yang diingini selepas itu.