Animasi terbang ke troli dengan Javascript Tulen dalam beberapa baris.

Baru-baru ini, saya terjumpa tutorial lama yang mempamerkan animasi fly-to-cart menggunakan jQuery. Saya mahu mencabar diri saya sendiri dengan melaksanakan kesan yang sama menggunakan JavaScript tulen.

Saya mencipta reka letak yang ringkas dengan produk dan ikon troli beli-belah. Penggayaan tidak penting jadi kami tidak akan membincangkannya di sini.

Caranya ialah dengan mengklonkan imej produk, tambahkan kepada elemen produk. Kemudian kira koordinat imej klon dan ikon troli anda, dapatkan perbezaannya dan terjemahkan imej anda kepadanya. Anda boleh menambah kesan tambahan seperti penskalaan kepada 0 atau kelegapan pudar. Tambahkan sifat peralihan supaya ia benar-benar menghidupkan perubahan dalam gaya

Jika anda mahu meletakkan animasi pada ikon troli juga, gunakan acara transitionstart dan transitionend pada Imej yang diklon untuk menambah dan mengalih keluar kelas CSS dengan animasi ditetapkan padanya.

Atas ialah kandungan terperinci Animasi terbang ke troli dengan Javascript Tulen dalam beberapa baris.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!