Mengintegrasikan perpustakaan animasi pihak ketiga ke projek

Mewujudkan animasi dan peralihan berasaskan CSS boleh menjadi satu cabaran. Mereka boleh menjadi kompleks dan memakan masa. Perlu bergerak ke hadapan dengan projek dengan sedikit masa untuk tweak peralihan yang sempurna? Pertimbangkan perpustakaan animasi CSS pihak ketiga dengan animasi siap sedia menunggu untuk digunakan. Namun, anda mungkin berfikir: Apa yang mereka? Apa yang mereka tawarkan? Bagaimana saya menggunakannya?

Nah, mari kita ketahui.

A (jenis) Sejarah ringkas: Hover

Sekali ada masa bahawa konsep keadaan hover adalah contoh remeh dari apa yang ditawarkan hari ini. Sebenarnya, idea untuk mempunyai reaksi terhadap kursor yang berlalu di atas elemen adalah lebih atau kurang. Cara yang berbeza untuk menyediakan ciri ini telah dicadangkan dan dilaksanakan. Ciri kecil ini, dengan cara, membuka pintu kepada idea CSS yang mampu animasi untuk elemen pada halaman. Dari masa ke masa, peningkatan kerumitan yang mungkin dengan ciri -ciri ini telah membawa kepada perpustakaan animasi CSS.

Dreamweaver Macromedia diperkenalkan pada bulan Disember 1997 dan menawarkan apa ciri mudah, swap imej pada hover. Ciri ini dilaksanakan dengan fungsi JavaScript yang akan tertanam dalam HTML oleh editor. Fungsi ini dinamakan mm_swapimage () dan telah menjadi sedikit cerita rakyat reka bentuk web. Ia adalah skrip mudah untuk digunakan, walaupun di luar Dreamweaver, dan populariti telah mengakibatkan ia masih digunakan walaupun hari ini. Dalam penyelidikan awal saya untuk artikel ini, saya dapati soalan yang berkaitan dengan fungsi ini dari tahun 2018 mengenai Adobe's Dreamweaver (Adobe memperoleh Macromedia pada tahun 2005) Forum Bantuan.

Fungsi JavaScript akan menukar imej dengan imej lain melalui menukar atribut SRC berdasarkan peristiwa tetikus dan tetikus . Apabila dilaksanakan, ia kelihatan seperti ini:

 <a href="#" onmouseout="mm_swapimgrestore ()" onmouseover="mm_swapimage ('imageName', '', 'newimage.jpg', 1)">
  <img  src="originalimage.jpg" name="ImageName"    style="max-width:90%"  style="max-width:90%" border="0" alt="Mengintegrasikan perpustakaan animasi pihak ketiga ke projek" >
</a>

Dengan piawaian hari ini, ia akan menjadi agak mudah untuk mencapai ini dengan JavaScript dan ramai di antara kita boleh melakukan ini dalam tidur kita. Tetapi pertimbangkan bahawa JavaScript masih bahasa skrip baru ini pada masa itu (dicipta pada tahun 1995) dan kadang -kadang kelihatan dan berkelakuan berbeza dari penyemak imbas kepada penyemak imbas. Mewujudkan JavaScript silang penyemak imbas tidak semestinya tugas yang mudah dan tidak semua orang yang membuat laman web walaupun menulis JavaScript. (Walaupun itu sudah pasti berubah.) Dreamweaver menawarkan fungsi ini melalui menu dalam editor dan pereka web tidak perlu menulis JavaScript. Ia didasarkan pada satu set "tingkah laku" yang boleh dipilih dari senarai pilihan yang berbeza. Pilihan ini boleh ditapis oleh satu set pelayar yang disasarkan; 3.0 penyemak imbas, 4.0 penyemak imbas, iaitu 3.0, IE 4.0, Netscape 3.0, Netscape 4.0. Ah, hari -hari tua yang baik.

Sekitar setahun selepas Dreamweaver pertama kali dibebaskan, spesifikasi CSS2 dari W3C yang disebutkan: Hover dalam draf kerja bertarikh Januari 1998. Ia disebut secara khusus dari segi pautan utama, tetapi bahasa itu mencadangkan ia mungkin telah digunakan untuk unsur -unsur lain. Untuk kebanyakan tujuan, nampaknya pemilih pseudo ini akan menjadi permulaan alternatif yang mudah untuk mm_swapimage (), kerana imej latar belakang berada dalam draf yang sama. Walaupun sokongan penyemak imbas adalah masalah kerana ia mengambil masa beberapa tahun sebelum penyemak imbas yang cukup menyokong CSS2 untuk menjadikannya pilihan yang sesuai untuk banyak pereka web. Akhirnya ada cadangan W3C CSS2.1, ini boleh dianggap sebagai asas "moden" CSS seperti yang kita tahu, yang diterbitkan pada bulan Jun 2011.

Di tengah -tengah semua ini, JQuery datang pada tahun 2006. Syukurlah, JQuery pergi jauh untuk memudahkan JavaScript di kalangan pelayar yang berbeza. Satu perkara yang menarik untuk cerita kami, versi pertama jQuery menawarkan kaedah Animate (). Dengan kaedah ini, anda boleh menghidupkan sifat CSS pada mana -mana elemen pada bila -bila masa; Bukan hanya pada hover. Dengan populariti semata -mata, kaedah ini mendedahkan keperluan untuk penyelesaian CSS yang lebih mantap yang dibakar ke dalam pelayar - penyelesaian yang tidak memerlukan perpustakaan JavaScript yang tidak selalu sangat berprestasi kerana batasan pelayar.

The: Hover pseudo-Class hanya menawarkan swap keras dari satu negeri ke negeri yang lain tanpa sokongan untuk peralihan yang lancar. Juga tidak boleh menghidupkan perubahan dalam unsur -unsur di luar sesuatu yang asas seperti melayang di atas elemen. Kaedah Animate () JQuery menawarkan ciri -ciri tersebut. Ia membuka jalan dan tidak akan kembali. Memandangkan perkara -perkara yang berlaku dalam dunia pembangunan web yang dinamik, draf kerja untuk menyelesaikannya telah dijalankan dengan baik sebelum cadangan CSS2.1 telah diterbitkan. Draf kerja pertama untuk Modul Peralihan CSS Tahap 3 pertama kali diterbitkan oleh W3C pada bulan Mac 2009. Draf kerja pertama untuk modul animasi CSS Tahap 3 diterbitkan pada masa yang sama. Kedua -dua modul CSS ini masih dalam status draf kerja pada Oktober 2018, tetapi sudah tentu, kami sudah menggunakannya berat

Jadi, apa yang pertama kali bermula sebagai fungsi JavaScript yang disediakan oleh pihak ketiga, hanya untuk keadaan hover yang mudah, telah membawa kepada peralihan dan animasi dalam CSS yang membolehkan animasi rumit dan kompleks-kerumitan yang banyak pemaju tidak semestinya ingin mempertimbangkan kerana mereka perlu bergerak dengan cepat pada projek-projek baru. Kami telah menjadi bulatan penuh; Hari ini banyak perpustakaan animasi CSS pihak ketiga telah diwujudkan untuk mengimbangi kerumitan ini.

Tiga jenis perpustakaan animasi pihak ketiga

Kami berada di dunia baru ini yang mampu animasi yang kuat, menarik, dan kompleks di laman web dan aplikasi kami. Beberapa idea yang berbeza telah datang ke barisan hadapan tentang cara mendekati tugas -tugas baru ini. Bukan satu pendekatan yang lebih baik daripada yang lain; Sesungguhnya, terdapat sedikit pertindihan yang baik dalam setiap. Perbezaannya adalah lebih lanjut mengenai bagaimana kami melaksanakan dan menulis kod untuk mereka. Ada yang penuh dengan perpustakaan JavaScript sahaja manakala yang lain adalah koleksi CSS sahaja.

Perpustakaan JavaScript

Perpustakaan yang beroperasi semata -mata melalui JavaScript sering menawarkan keupayaan melebihi apa yang disediakan oleh CSS. Biasanya, terdapat pertindihan kerana perpustakaan sebenarnya boleh menggunakan ciri -ciri CSS sebagai sebahagian daripada enjin mereka, tetapi itu akan diturunkan memihak kepada API. Contoh -contoh perpustakaan sedemikian adalah Greensock dan Anime.js. Anda dapat melihat sejauh mana apa yang mereka tawarkan dengan melihat demo yang mereka berikan (Greensock mempunyai koleksi yang bagus di Codepen). Mereka kebanyakannya dimaksudkan untuk animasi yang sangat kompleks, tetapi boleh berguna untuk animasi yang lebih asas juga.

Perpustakaan JavaScript dan CSS

Terdapat perpustakaan pihak ketiga yang terutamanya termasuk kelas CSS tetapi menyediakan beberapa JavaScript untuk memudahkan penggunaan kelas dalam projek anda. Satu perpustakaan, micron.js, menyediakan kedua -dua API JavaScript dan atribut data yang boleh digunakan pada unsur -unsur. Perpustakaan jenis ini membolehkan penggunaan animasi pra-bina yang mudah anda pilih. Perpustakaan lain, Motion UI, bertujuan untuk digunakan dengan kerangka JavaScript. Walaupun, ia juga berfungsi pada tanggapan serupa campuran API JavaScript, kelas pra-dibina, dan atribut data. Jenis-jenis perpustakaan ini menyediakan animasi pra-dibina dan cara mudah untuk menyebarkannya.

Perpustakaan CSS

Perpustakaan jenis ketiga adalah CSS sahaja. Biasanya, ini hanyalah fail CSS yang anda muat melalui tag pautan di HTML anda. Anda kemudian memohon dan mengeluarkan kelas CSS tertentu untuk menggunakan animasi yang disediakan. Dua contoh jenis perpustakaan ini adalah animate.css dan animista. Yang mengatakan, terdapat juga perbezaan utama antara kedua -dua perpustakaan tertentu ini. Animate.css adalah pakej CSS total manakala Animista menyediakan antara muka yang licin untuk memilih animasi yang anda inginkan dengan kod yang disediakan. Perpustakaan ini sering mudah dilaksanakan tetapi anda perlu menulis kod untuk menggunakannya. Ini adalah jenis perpustakaan artikel ini akan memberi tumpuan.

Tiga jenis animasi CSS

Ya, ada corak; Peraturan tiga adalah di mana -mana, selepas semua.

Dalam kebanyakan kes, terdapat tiga jenis animasi untuk dipertimbangkan ketika menggunakan perpustakaan pihak ketiga. Setiap jenis sesuai dengan tujuan yang berbeza dan mempunyai cara yang berbeza untuk menggunakannya.

Hover animasi

Animasi ini bertujuan untuk terlibat dalam beberapa jenis keadaan hover. Mereka sering digunakan dengan butang, tetapi kemungkinan lain menggunakannya untuk menyerlahkan bahagian -bahagian kursor yang berlaku. Mereka juga boleh digunakan untuk keadaan fokus.

Animasi perhatian

Animasi ini bertujuan untuk digunakan pada unsur -unsur yang biasanya di luar pusat visual orang yang melihat halaman. Animasi digunakan untuk seksyen paparan yang memerlukan perhatian. Animasi sedemikian boleh bersifat halus untuk perkara -perkara yang memerlukan perhatian akhirnya tetapi tidak mengasyikkan. Mereka juga boleh mengganggu apabila perhatian segera diperlukan.

Animasi peralihan

Animasi ini sering dimaksudkan untuk mempunyai elemen menggantikan yang lain dalam pandangan, tetapi boleh digunakan untuk satu elemen juga. Ini biasanya termasuk animasi untuk "meninggalkan" pandangan dan animasi cermin untuk "memasuki" pandangan. Fikirkan memudar dan memudar masuk. Ini biasanya diperlukan dalam aplikasi halaman tunggal sebagai satu bahagian data yang akan beralih ke set data lain, sebagai contoh.

Oleh itu, mari kita pergi ke contoh setiap jenis animasi dan bagaimana seseorang boleh menggunakannya.

Mari kita lulus!

Sesetengah perpustakaan mungkin sudah ditetapkan untuk kesan hover, sementara sesetengahnya mempunyai keadaan hover sebagai tujuan utama mereka. Satu perpustakaan sedemikian adalah hover.css, yang merupakan penyelesaian drop-in yang menyediakan pelbagai kesan hover yang digunakan melalui nama kelas. Kadang-kadang, kami mahu menggunakan animasi di perpustakaan yang tidak menyokong secara langsung: Hover pseudo-Class kerana itu mungkin bertentangan dengan gaya global.

Untuk contoh ini, saya akan menggunakan animasi TADA yang disediakan oleh Animate.css. Ia bertujuan lebih sebagai pencari perhatian, tetapi ia akan cukup untuk contoh ini. Sekiranya anda melihat melalui CSS perpustakaan, anda akan mendapati bahawa tidak ada: hover pseudo-class untuk dijumpai. Jadi, kita perlu membuatnya berfungsi dengan cara itu sendiri.

Kelas Tada dengan sendirinya hanyalah ini:

 .tada {
  Nama Animasi: Tada;
}

Pendekatan rendah untuk membuat ini bertindak balas terhadap keadaan hover adalah untuk membuat salinan kelas tempatan kita sendiri, tetapi memanjangkannya sedikit. Biasanya, animate.css adalah penyelesaian drop-in, jadi kami tidak semestinya mempunyai pilihan untuk mengedit fail CSS asal; Walaupun anda boleh mempunyai salinan fail tempatan anda sendiri jika anda mahu. Oleh itu, kita hanya membuat kod yang kita perlukan untuk menjadi berbeza dan biarkan perpustakaan mengendalikan selebihnya.

 .tada-hover: hover {
  Nama Animasi: Tada;
}

Kita mungkin tidak boleh mengatasi nama kelas asal sekiranya kita sebenarnya mahu menggunakannya di tempat lain. Jadi, sebaliknya, kita membuat variasi yang boleh kita letakkan: hover pseudo-class pada pemilih. Kini kami hanya menggunakan kelas animasi yang diperlukan oleh perpustakaan bersama dengan kelas tada-hover adat kami ke elemen dan ia akan memainkan animasi itu pada hover.

Sekiranya anda tidak mahu membuat kelas tersuai dengan cara ini, tetapi lebih suka penyelesaian JavaScript, ada cara yang agak mudah untuk mengendalikannya. Cukup aneh, ia adalah kaedah yang sama dengan kaedah MM_ImagesWap () dari DreamWeaver yang dibincangkan sebelumnya.

 // Mari pilih elemen dengan id #js_example
var js_example = document.queryselector ('#js_example');

// Apabila elemen dengan id #js_example berlegar ...
js_example.addeventListener ('Mouseover', function () {
  // ... mari tambahkan dua kelas ke elemen: animasi dan tada ...
  this.classlist.add ('animasi', 'tada');
});
// ... kemudian keluarkan kelas tersebut apabila tetikus tidak berada di atas elemen.
js_example.addeventListener ('mouseout', function () {
  this.classlist.remove ('animasi', 'tada');
});

Sebenarnya terdapat pelbagai cara untuk mengendalikan ini, bergantung kepada konteksnya. Di sini, kami membuat beberapa pendengar acara untuk menunggu peristiwa tetikus dan tetikus. Pendengar ini kemudian memohon dan mengeluarkan kelas animasi dan TADA perpustakaan seperti yang diperlukan. Seperti yang anda dapat lihat, memanjangkan perpustakaan pihak ketiga hanya sedikit untuk memenuhi keperluan kita dapat dicapai dengan cara yang agak mudah.

Bolehkah saya mendapat perhatian anda?

Satu lagi jenis animasi yang boleh dibantu oleh perpustakaan pihak ketiga adalah pencari perhatian. Animasi ini berguna apabila anda ingin menarik perhatian kepada elemen atau bahagian halaman. Beberapa contoh ini boleh menjadi pemberitahuan atau input borang yang diperlukan. Animasi ini boleh menjadi halus atau langsung. Halus apabila sesuatu memerlukan perhatian akhirnya tetapi tidak perlu diselesaikan dengan segera. Langsung apabila sesuatu memerlukan penyelesaian sekarang.

Sesetengah perpustakaan mempunyai animasi seperti sebahagian daripada pakej keseluruhan, sementara ada yang dibina khusus untuk tujuan ini. Kedua -dua Animate.CSS dan Animista mempunyai perhatian mencari animasi, tetapi mereka bukanlah tujuan utama bagi perpustakaan tersebut. Contoh perpustakaan yang dibina untuk tujuan ini ialah csshake. Perpustakaan yang digunakan bergantung kepada keperluan projek dan berapa banyak masa yang anda ingin melabur dalam melaksanakannya. Sebagai contoh, CSSHake bersedia untuk pergi dengan sedikit masalah di pihak anda - hanya memohon kelas seperti yang diperlukan. Walaupun, jika anda sudah menggunakan perpustakaan seperti Animate.css, maka anda mungkin tidak akan ingin memperkenalkan perpustakaan kedua (untuk prestasi, bergantung kepada kebergantungan, dan sebagainya).

Jadi, perpustakaan seperti Animate.css boleh digunakan tetapi memerlukan sedikit persediaan. Halaman GitHub perpustakaan mempunyai contoh bagaimana untuk melakukan ini. Bergantung kepada keperluan sesuatu projek, melaksanakan animasi ini sebagai pencari perhatian agak mudah.

Untuk jenis animasi yang halus, kita boleh mempunyai satu yang hanya mengulangi beberapa kali dan berhenti. Ini biasanya melibatkan menambah kelas perpustakaan, menggunakan harta lelaran animasi ke CSS, dan menunggu acara Animation End untuk membersihkan kelas perpustakaan.

Berikut adalah contoh mudah yang mengikuti corak yang sama yang kita lihat sebelum ini untuk keadaan hover:

 var pulse = document.QuerySelector ('#pulse');

fungsi PlayPulse () {
  pulse.classlist.add ('animasi', 'pulse');
}

pulse.addeventListener ('animationEnd', function () {
  pulse.classlist.remove ('animasi', 'pulse');
});

PlayPulse ();

Kelas perpustakaan digunakan apabila fungsi PlayPulse dipanggil. Terdapat pendengar acara untuk acara AnimationEnD yang akan menghapuskan kelas perpustakaan. Biasanya, ini hanya akan bermain sekali, tetapi anda mungkin mahu mengulangi beberapa kali sebelum berhenti. Animate.css tidak menyediakan kelas untuk ini, tetapi cukup mudah untuk memohon harta CSS untuk elemen kami untuk mengendalikannya.

 #pulse {
  Animasi-Iterasi-kiraan: 3; / * Berhenti selepas tiga kali */
}

Dengan cara ini, animasi akan bermain tiga kali sebelum berhenti. Jika kita perlu menghentikan animasi lebih awal, kita boleh mengeluarkan kelas perpustakaan secara manual di luar fungsi AnimationEnd. Dokumentasi perpustakaan sebenarnya memberikan contoh fungsi yang boleh diguna semula untuk menggunakan kelas yang menghilangkannya selepas animasi; Sangat serupa dengan kod di atas. Ia juga agak mudah untuk memperluaskannya untuk memohon kiraan lelaran ke elemen tersebut.

Untuk pendekatan yang lebih langsung, katakan animasi tak terhingga yang tidak akan berhenti sehingga selepas beberapa jenis interaksi pengguna berlaku. Mari kita berpura -pura mengklik elemen adalah apa yang memulakan animasi dan mengklik sekali lagi menghentikannya. Perlu diingat bahawa anda ingin memulakan dan menghentikan animasi terpulang kepada anda.

 var bounce = document.QuerySelector ('#bounce');

Bounce.AdDeventListener ('klik', fungsi () {
  jika (! Bounce.classlist.contains ('animasi')) {
    Bounce.classlist.add ('animasi', 'melantun', 'tak terhingga');
  } else {
    Bounce.classlist.remove ('animasi', 'melantun', 'tak terhingga');
  }
});

Cukup sederhana. Mengklik ujian elemen jika kelas "animasi" perpustakaan telah digunakan. Sekiranya tidak, kami menggunakan kelas perpustakaan supaya ia memulakan animasi. Jika ia mempunyai kelas, kami mengeluarkannya untuk menghentikan animasi. Perhatikan bahawa kelas tak terhingga pada akhir senarai kelas. Syukurlah, animate.css menyediakan ini untuk kami di luar kotak. Jika perpustakaan pilihan anda tidak menawarkan kelas sedemikian, maka inilah yang anda perlukan dalam CSS anda:

 #bounce {
  Animasi-mengira-kiraan: tak terhingga;
}

Inilah demo yang menunjukkan bagaimana kod ini bertindak:

Melangkah barang keluar dari jalan

Apabila meneliti artikel ini, saya mendapati bahawa peralihan (tidak boleh dikelirukan dengan peralihan CSS) adalah mudah animasi yang paling biasa di perpustakaan pihak ketiga. Ini adalah animasi mudah yang dibina untuk membolehkan elemen masuk atau meninggalkan halaman. Corak yang sangat biasa yang dilihat dalam aplikasi halaman tunggal moden adalah untuk mempunyai satu elemen meninggalkan halaman sementara yang lain menggantikannya dengan memasukkan halaman. Fikirkan elemen pertama yang memudar dan memudar kedua. Ini boleh menggantikan data lama dengan data baru, bergerak ke panel seterusnya dalam urutan, atau bergerak dari satu halaman ke satu lagi dengan penghala. Kedua -dua Sarah Drasner dan Georgy Marchuk mempunyai contoh yang sangat baik dari jenis peralihan ini.

Untuk sebahagian besar, perpustakaan animasi tidak akan menyediakan cara untuk membuang dan menambah unsur -unsur semasa animasi peralihan. Perpustakaan yang menyediakan JavaScript tambahan mungkin mempunyai fungsi ini, tetapi kerana kebanyakan tidak, kita akan membincangkan cara mengendalikan fungsi ini sekarang.

Memasukkan satu elemen

Untuk contoh ini, kami akan menggunakan animate.css sebagai perpustakaan kami. Dalam kes ini, saya akan menggunakan animasi Fadeindown.

Sekarang, sila ingat ada banyak cara untuk mengendalikan memasukkan elemen ke dalam DOM dan saya tidak mahu menutupnya di sini. Saya hanya akan menunjukkan bagaimana untuk memanfaatkan animasi untuk membuat penyisipan lebih baik dan lebih semula jadi daripada elemen yang hanya muncul. Untuk animate.css (dan mungkin banyak perpustakaan lain), memasukkan elemen dengan animasi agak mudah.

 biarkan penyisipan = document.createElement ('div');
Insertelement.innertext = 'Div ini dimasukkan';
InsertElement.classlist.add ('animasi', 'fadeindown');

InsertElement.AdDeventListener ('AnimationEnd', function () {
  this.classlist.remove ('animasi', 'fadeindown');
});

document.body.append (sisipan);

Walau bagaimanapun, anda memutuskan untuk membuat elemen tidak banyak perkara; Anda hanya perlu memastikan kelas yang diperlukan telah digunakan sebelum memasukkan elemen tersebut. Kemudian ia akan bernyawa dengan baik. Saya juga memasukkan pendengar acara untuk acara AnimationEnD yang menghilangkan kelas. Seperti biasa, terdapat beberapa cara untuk melakukan ini dan ini mungkin cara yang paling langsung untuk mengendalikannya. Alasan untuk mengeluarkan kelas adalah untuk memudahkan untuk membalikkan proses jika kita mahu. Kami tidak mahu animasi masuk bersaing dengan animasi yang meninggalkan.

Mengeluarkan satu elemen

Mengeluarkan satu elemen adalah sejenis yang serupa dengan memasukkan elemen. Unsur ini sudah ada, jadi kami hanya menggunakan kelas animasi yang dikehendaki. Kemudian pada acara AnimationEnD kami mengeluarkan elemen dari DOM. Dalam contoh ini, kami akan menggunakan animasi FadeOutdown dari Animate.css kerana ia berfungsi dengan baik dengan animasi Fadeindown.

 Biarkan penyingkiran = document.QuerySelector ('#RemoveElement');

RoveElement.AdDeventListener ('AnimationEnd', Function () {
  this.remove ();
});

RoveElement.ClassList.Add ('animasi', 'fadeoutdown');

Seperti yang anda lihat, kami menyasarkan elemen, menambah kelas, dan keluarkan elemen pada akhir animasi.

Isu dengan semua ini ialah dengan memasukkan dan mengeluarkan unsur -unsur dengan cara ini akan menyebabkan unsur -unsur lain pada halaman melompat untuk menyesuaikan diri. Anda perlu mengambil kira itu dalam beberapa cara, kemungkinan besar dengan CSS dan susun atur halaman untuk menyimpan ruang yang tetap untuk unsur -unsur.

Keluar dari jalan saya, saya datang!

Sekarang kita akan menukar dua elemen, satu meninggalkan sementara yang lain memasuki. Terdapat beberapa cara mengendalikan ini, tetapi saya akan memberikan contoh yang pada dasarnya menggabungkan dua contoh sebelumnya.

Saya akan pergi ke JavaScript di bahagian untuk menerangkan bagaimana ia berfungsi. Pertama, kita cache merujuk kepada butang dan bekas untuk kedua -dua elemen. Kemudian, kami membuat dua kotak yang akan ditukar ke dalam bekas.

 biarkan butang = document.QuerySelector ('butang');
biarkan kontena = document.QuerySelector ('. Container');
biarkan box1 = document.createElement ('div');
biarkan box2 = document.createElement ('div');

Saya mempunyai fungsi generik untuk mengeluarkan kelas animasi untuk setiap acara AnimationEnd.

 Biarkan penyingkiran = fungsi () {
  box1.classlist.remove ('animasi', 'fadeoutright', 'fadeinleft');
  box2.classlist.remove ('animasi', 'fadeoutright', 'fadeinleft');
}

Fungsi seterusnya adalah sebahagian besar fungsi pertukaran. Pertama, kami menentukan kotak semasa yang dipaparkan. Berdasarkan itu, kita boleh menyimpulkan elemen meninggalkan dan memasuki. Elemen meninggalkan mendapat pendengar acara yang memanggil fungsi switchelements dikeluarkan terlebih dahulu supaya kita tidak mendapati diri kita dalam gelung animasi. Kemudian, kami mengeluarkan elemen meninggalkan dari bekas sejak animasinya selesai. Seterusnya, kami menambah kelas animasi ke elemen masuk dan masukkannya ke bekas supaya ia akan menghidupkannya.

 Biarkan switchElements = function () {
  Biarkan CurrentElement = Document.QuerySelector ('. Container .box');
  Biarkan leuseLement = currentelement.classlist.contains ('box1')? Box1: Box2;
  Biarkan EnterElement = LEADELEMENT === Box1? Box2: Box1;
  
  LEADELEMENT.REMOVEEVENTListener ('AnimationEnd', SwitchElements);
  leaveelement.remove ();
  enterElement.classlist.add ('animasi', 'fadeinleft');
  container.append (enterElement);
}

Kita perlu melakukan beberapa persediaan umum untuk kedua -dua kotak. Plus, kami menambah kotak pertama ke bekas.

 box1.classlist.add ('box', 'box1');
box1.addeventListener ('animationEnd', penyingkiran);
box2.classlist.add ('box', 'box2');
box2.addeventListener ('animationEnd', penyingkiran);

container.AppendChild (Box1);

Akhirnya, kami mempunyai pendengar acara klik untuk butang kami yang melakukan toggling. Bagaimana urutan peristiwa ini bermula secara teknikal untuk anda. Untuk contoh ini, saya memutuskan klik butang mudah. Saya fikir kotak mana yang sedang dipaparkan, yang akan meninggalkan, untuk memohon kelas yang sesuai untuk menjadikannya bernyawa. Kemudian saya memohon pendengar acara untuk acara AnimationEnD yang memanggil fungsi switchelements yang ditunjukkan di atas yang mengendalikan swap sebenar.

 Button.AdDeventListener ('klik', fungsi () {
  Biarkan CurrentElement = Document.QuerySelector ('. Container .box');
  
  jika (currentelement.classlist.contains ('box1')) {
    box1.classlist.add ('animasi', 'fadeoutright');
    box1.addeventListener ('animationEnd', switchelements);
  } else {
    box2.classlist.add ('animasi', 'fadeoutright');
    box2.addeventListener ('animationEnd', switchelements);
  }
}

Satu isu yang jelas dengan contoh ini adalah bahawa ia sangat keras untuk keadaan ini. Walaupun, ia boleh dilanjutkan dengan mudah dan diselaraskan untuk situasi yang berbeza. Oleh itu, contohnya berguna dari segi memahami satu cara mengendalikan tugas sedemikian. Syukurlah, beberapa perpustakaan animasi, seperti Motionui, menyediakan beberapa JavaScript untuk membantu peralihan elemen. Satu lagi perkara yang perlu dipertimbangkan ialah beberapa rangka kerja JavaScript, seperti Vuejs mempunyai fungsi untuk membantu peralihan elemen animasi.

Saya juga telah mencipta satu lagi contoh yang menyediakan sistem yang lebih fleksibel. Ia terdiri daripada bekas yang menyimpan rujukan untuk meninggalkan dan memasukkan animasi dengan atribut data. Bekas memegang dua elemen yang akan menukar tempat pada arahan. Cara contoh ini dibina ialah animasi mudah diubah dalam atribut data melalui JavaScript. Saya juga mempunyai dua bekas dalam demo; Satu menggunakan animate.css dan yang lain menggunakan animista untuk animasi. Ini contoh yang besar, jadi saya tidak akan memeriksa kod di sini; Tetapi ia sangat berkomentar, jadi lihatlah jika ia menarik.

Luangkan masa untuk dipertimbangkan ...

Adakah semua orang benar -benar mahu melihat semua animasi ini? Sesetengah orang boleh mempertimbangkan animasi kami di atas dan tidak perlu, tetapi bagi sesetengah orang, mereka sebenarnya boleh menimbulkan masalah. Beberapa ketika dahulu, WebKit memperkenalkan pertanyaan media-gerakan yang dikurangkan untuk membantu dengan masalah gangguan spektrum vestibular yang mungkin. Eric Bailey juga mencatatkan pengenalan yang baik kepada pertanyaan media, serta susulan dengan pertimbangan untuk amalan terbaik. Pasti membaca ini.

Oleh itu, adakah perpustakaan animasi pilihan anda menyokong gerakan yang lebih suka dikurangkan? Jika dokumentasi tidak mengatakan bahawa ia berlaku, maka anda mungkin harus menganggapnya tidak. Walaupun, agak mudah untuk memeriksa kod perpustakaan untuk melihat apakah ada apa -apa untuk pertanyaan media. Sebagai contoh, animate.css memilikinya dalam fail separa _base.scss.

 @media (cetak), (lebih suka-dikurangkan-gerakan) {
  .animated {
    Animasi: Unset! Penting;
    Peralihan: Tiada! Penting;
  }
}

Kod ini juga memberikan contoh yang sangat baik tentang bagaimana untuk melakukan ini untuk diri sendiri jika perpustakaan tidak menyokongnya. Jika perpustakaan mempunyai kelas biasa yang digunakan - seperti animate.css menggunakan "animasi" - maka anda hanya boleh menargetkan kelas itu. Jika ia tidak menyokong kelas sedemikian maka anda perlu menyasarkan kelas animasi sebenar atau membuat kelas tersuai anda sendiri untuk tujuan itu.

 .scale-up-center {
  Animasi: Skala Up-Up-Center 0.4S padu-bezier (0.390, 0.575, 0.565, 1.000) kedua-duanya;
}

@KeyFrames Scale-Up-Center {
  0% {transform: skala (0.5); }
  100% {transform: skala (1); }
}

@media (cetak), (lebih suka-dikurangkan-gerakan) {
  .scale-up-center {
    Animasi: Unset! Penting;
    Peralihan: Tiada! Penting;
  }
}

Seperti yang anda lihat, saya hanya menggunakan contoh seperti yang disediakan oleh Animate.css dan mensasarkan kelas animasi dari Animista. Perlu diingat bahawa anda perlu mengulangi ini untuk setiap kelas animasi yang anda pilih untuk digunakan dari perpustakaan. Walaupun, dalam sekeping susulan Eric, dia mencadangkan merawat semua animasi sebagai peningkatan progresif dan itu boleh menjadi satu cara untuk mengurangkan kod dan membuat pengalaman pengguna yang lebih mudah diakses.

Biarkan rangka kerja mengangkat berat untuk anda

Dalam banyak cara, pelbagai rangka kerja seperti React dan Vue boleh menggunakan animasi CSS pihak ketiga lebih mudah daripada dengan vanila JavaScript, terutamanya kerana anda tidak perlu mengikat swap kelas atau acara animasi secara manual. Anda boleh memanfaatkan fungsi rangka kerja yang telah disediakan. Keindahan menggunakan kerangka kerja adalah bahawa mereka juga menyediakan beberapa cara yang berbeza untuk mengendalikan animasi ini bergantung kepada keperluan projek. Contoh -contoh di bawah ini hanya satu contoh pilihan kecil.

Hover kesan

Untuk kesan hover, saya akan mencadangkan menetapkannya dengan CSS (seperti yang saya cadangkan di atas) sebagai cara yang lebih baik untuk pergi. Jika anda benar -benar memerlukan penyelesaian JavaScript dalam rangka kerja, seperti Vue, ia akan menjadi seperti ini:

 <butang event>
  Tada
</butang>

 Kaedah: {
  lebih: fungsi (e, jenis) {
    e.target.classlist.add ('animasi', jenis);
  },
  Tinggalkan: fungsi (e, jenis) {
    e.target.classlist.remove ('animasi', jenis);
  }
}

Tidak benar -benar berbeza daripada penyelesaian vanila JavaScript di atas. Juga, seperti dahulu, terdapat banyak cara mengendalikan ini.

Pencari perhatian

Menyediakan pencari perhatian sebenarnya lebih mudah. Dalam kes ini, kami hanya menggunakan kelas yang kami perlukan, sekali lagi, menggunakan Vue sebagai contoh:

 <div:> Pulse 

<div:> Bounce </div:></div:>

Dalam contoh nadi, apabila ispulse Boolean adalah benar, kedua -dua kelas digunakan. Dalam contoh lantunan, apabila boolean isbounce adalah benar, kelas animasi dan lantunan digunakan. Kelas tak terhingga digunakan tanpa mengira sehingga kita dapat melantun yang tidak pernah berakhir sehingga boolean isbounce kembali kepada palsu.

Peralihan

Syukurlah, komponen peralihan Vue menyediakan cara mudah untuk menggunakan kelas animasi pihak ketiga dengan kelas peralihan tersuai. Perpustakaan lain, seperti React, boleh menawarkan ciri-ciri yang sama atau tambahan. Untuk menggunakan kelas animasi di Vue, kami hanya melaksanakannya dalam komponen peralihan.

 <peralihan masukkan aktif- cuti mod="keluar">
  <div v-if="toggle" key="if"> jika contoh </div>
  <div v-else key="else"> contoh lain </div>
</peralihan>

Menggunakan animate.css, kami hanya menggunakan kelas yang diperlukan. Untuk Enter-Active, kami menggunakan kelas animasi yang diperlukan bersama-sama dengan Fadeindown. Untuk cuti aktif, kami menggunakan kelas animasi yang diperlukan bersama-sama dengan FadeOutdown. Semasa urutan peralihan, kelas -kelas ini dimasukkan pada masa yang sesuai. Vue mengendalikan memasukkan dan mengeluarkan kelas untuk kami.

Untuk contoh yang lebih kompleks menggunakan perpustakaan animasi pihak ketiga dalam kerangka JavaScript, terokai projek ini:

Sertailah pesta!

Ini adalah rasa kecil kemungkinan yang menanti projek anda kerana terdapat banyak, banyak perpustakaan animasi CSS pihak ketiga di luar sana untuk meneroka. Ada yang teliti, eksentrik, khusus, menjengkelkan, atau hanya lurus ke hadapan. Terdapat perpustakaan untuk animasi JavaScript yang kompleks seperti Greensock atau Anime.js. Terdapat juga perpustakaan yang akan mensasarkan watak -watak dalam elemen.

Semoga semua ini akan memberi inspirasi kepada anda untuk bermain dengan perpustakaan ini dalam perjalanan untuk mewujudkan animasi CSS anda sendiri.

Atas ialah kandungan terperinci Mengintegrasikan perpustakaan animasi pihak ketiga ke projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!