Web Animations API, yang pertama kali dikirimkan di Chrome 36, menyediakan kontrol JavaScript yang mudah untuk animasi di browser, dan juga diterapkan di Gecko dan WebKit.
Chrome 50 memperkenalkan perubahan untuk meningkatkan interoperabilitas dengan browser lain dan agar lebih mematuhi spesifikasi. Perubahan ini adalah:
- Membatalkan acara
Animation.id- Perubahan status untuk metode
pause() - Penghentian penggunaan nama putus-putus sebagai kunci dalam keyframe
Di Chrome 51, beberapa perubahan ini telah selesai:
- Menghapus nama putus-putus sebagai kunci dalam keyframe
Membatalkan acara
Antarmuka Animation
menyertakan metode untuk membatalkan animasi, yang lucunya disebut
cancel().
Chrome 50 menerapkan pengaktifan peristiwa pembatalan saat metode dipanggil sesuai
spesifikasi, yang memicu penanganan peristiwa melalui
atribut oncancel
jika telah diinisialisasi.
Dukungan untuk Animation.id
Saat membuat animasi menggunakan
element.animate(),
Anda dapat meneruskan sejumlah properti. Misalnya, berikut adalah contoh
animasi opasitas pada objek:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Dengan menentukan properti id, properti tersebut akan ditetapkan pada objek Animation yang ditampilkan yang dapat membantu saat men-debug konten saat Anda memiliki banyak objek Animation yang harus ditangani. Berikut adalah contoh cara menentukan id untuk animasi yang Anda buat instance-nya:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Perubahan status untuk metode pause()
Metode pause()
digunakan untuk menjeda animasi yang sedang berlangsung. Jika Anda memeriksa status
animasi menggunakan atribut playState,
atribut tersebut harus disetel ke paused
setelah metode paused() dipanggil. Pada versi Chrome sebelum 50, atribut playState akan menunjukkan idle jika animasi belum dimulai, tetapi sekarang atribut tersebut mencerminkan status yang benar, yaitu paused.
Menghapus nama putus-putus sebagai kunci dalam keyframe
Untuk lebih mematuhi spesifikasi dan implementasi lainnya, Chrome 50 mengirimkan peringatan ke konsol jika nama putus-putus digunakan untuk kunci dalam animasi keyframe. String yang benar untuk digunakan adalah nama camelCase sesuai dengan algoritma konversi properti CSS ke atribut IDL.
Misalnya, properti CSS margin-left akan mengharuskan Anda meneruskan
marginLeft sebagai kunci.
Chrome 51 menghapus dukungan untuk nama putus-putus sepenuhnya, jadi sekarang adalah waktu yang tepat untuk memperbaiki konten yang ada dengan penamaan yang benar sesuai spesifikasi.
Ringkasan
Perubahan ini membuat implementasi Animasi Web Chrome lebih mirip dengan implementasi browser lain dan lebih mematuhi spesifikasi yang semuanya membantu menyederhanakan pembuatan konten halaman web untuk interoperabilitas yang lebih baik.