創(chuàng)建基于CSS的動(dòng)畫和過(guò)渡可能是一個(gè)挑戰(zhàn)。它們可能很復(fù)雜且耗時(shí)。是否需要進(jìn)行一個(gè)很少時(shí)間來(lái)調(diào)整完美過(guò)渡的項(xiàng)目？考慮使用現(xiàn)成的動(dòng)畫等待使用的第三方CSS動(dòng)畫庫(kù)。但是，您可能在想：它們是什么？他們提供什么？我如何使用它們？

好吧，讓我們找出答案。

一個(gè)（一種）簡(jiǎn)短的歷史：懸停

曾經(jīng)有一段時(shí)間，懸停狀態(tài)的概念就是今天提供的概念。實(shí)際上，對(duì)光標(biāo)傳遞在元素頂部的反應(yīng)的想法或不存在。提出并實(shí)施了提供此功能的不同方法。在某種程度上，這個(gè)小型功能為CSS能夠?yàn)轫?yè)面上的元素提供動(dòng)畫的想法打開了大門。隨著時(shí)間的流逝，這些功能可能會(huì)增加復(fù)雜性，從而導(dǎo)致CSS動(dòng)畫庫(kù)。

Macromedia的Dreamweaver于1997年12月推出，并提供了一個(gè)簡(jiǎn)單的功能，即懸停的圖像交換。此功能是用JavaScript函數(shù)實(shí)現(xiàn)的，該功能將由編輯器嵌入HTML中。該功能名為MM_SWAPIMAGE（），已成為Web Design的一些民俗。即使在Dreamweaver之外，這也是一個(gè)易于使用的腳本，而且它的受歡迎程度仍導(dǎo)致它仍在使用。在我對(duì)本文的最初研究中，我發(fā)現(xiàn)了一個(gè)與此功能有關(guān)的問(wèn)題，從2018年開始，關(guān)于Adobe的Dreamweaver （Adobe在2005年收購(gòu)了Macromedia）幫助論壇。

JavaScript函數(shù)將通過(guò)基于MouseOver和MouseOut事件更改SRC屬性將圖像與另一個(gè)圖像交換。實(shí)施時(shí)，看起來(lái)像這樣：

 <a href="%E2%80%9C%EF%BC%83%E2%80%9D" onmouseout="“" mm_swapimgrestore onmouseover="“" mm_swapimage>
  <img  src="%E2%80%9C" ointernimage.jpg name="“" imagename    style="max-width:90%" height="“" border="“" alt="將第三方動(dòng)畫庫(kù)集成到項(xiàng)目" >
</a>

按照當(dāng)今的標(biāo)準(zhǔn)，使用JavaScript實(shí)現(xiàn)這一目標(biāo)非常容易，我們中的許多人實(shí)際上可以在睡眠中做到這一點(diǎn)。但是，請(qǐng)考慮到JavaScript當(dāng)時(shí)仍然是這種新的腳本語(yǔ)言（1995年創(chuàng)建），有時(shí)從瀏覽器到瀏覽器看上去和行為不同。創(chuàng)建跨瀏覽器JavaScript并不總是一件容易的事，并不是每個(gè)人都創(chuàng)建網(wǎng)頁(yè)甚至寫JavaScript。 （雖然這確實(shí)發(fā)生了變化。）Dreamweaver通過(guò)編輯器中的菜單提供了此功能，并且網(wǎng)絡(luò)設(shè)計(jì)師甚至不需要編寫JavaScript。它基于一組“行為”，可以從不同選項(xiàng)的列表中選擇。這些選項(xiàng)可以通過(guò)一組目標(biāo)瀏覽器過(guò)濾； 3.0瀏覽器，4.0瀏覽器，I 3.0，I 4.0，Netscape 3.0，Netscape 4.0。啊，過(guò)去的美好時(shí)光。

Dreamweaver首次發(fā)布后約一年，W3C的CSS2規(guī)范提到了：在1998年1月的工作草案中懸停。在錨點(diǎn)鏈接方面是特別提到的，但該語(yǔ)言表明它可能已應(yīng)用于其他元素。出于大多數(shù)目的，似乎這個(gè)偽選擇器將是MM_SWAPIMAGE（）的簡(jiǎn)單替代方案的開始，因?yàn)楸尘皥D像在同一草稿中。盡管瀏覽器支持是一個(gè)問(wèn)題，因?yàn)榛藬?shù)年的時(shí)間才能適當(dāng)?shù)刂С諧SS2，以使其成為許多網(wǎng)頁(yè)設(shè)計(jì)師的可行選擇。終于有了CSS2.1的W3C建議，這可能被認(rèn)為是我們所知道的“現(xiàn)代” CSS的基礎(chǔ)，該基礎(chǔ)于2011年6月發(fā)布。

在這一切的中間， JQuery出現(xiàn)在2006年。幸運(yùn)的是，JQuery在簡(jiǎn)化不同瀏覽器中的Javascript方面走了很長(zhǎng)一段路。我們的故事感興趣的一件事，第一個(gè)版本的jQuery提供了Animate（）方法。使用此方法，您可以隨時(shí)在任何元素上對(duì)CSS屬性進(jìn)行動(dòng)畫動(dòng)畫。不只是懸停。由于其純粹的知名度，這種方法暴露了對(duì)瀏覽器中更堅(jiān)固的CSS解決方案的需求 - 這種解決方案不需要由于瀏覽器限制而導(dǎo)致的JavaScript庫(kù)，該解決方案并不總是非常性能。

：懸停的偽級(jí)僅提供從一個(gè)州到另一個(gè)州的硬交換，而沒(méi)有支持平穩(wěn)過(guò)渡。它也不能使元素之外的元素變化像懸停在元素上的基本內(nèi)容之外。 JQuery的Animate（）方法提供了這些功能。它鋪平了道路，沒(méi)有回頭路。隨著網(wǎng)絡(luò)開發(fā)的動(dòng)態(tài)世界的發(fā)展，解決此問(wèn)題的工作草案在發(fā)布CSS2.1的推薦之前就已經(jīng)進(jìn)行了。 W3C于2009年3月首次發(fā)布了CSS Transitions Module 3級(jí)的第一個(gè)工作草案。CSS動(dòng)畫模塊3級(jí)的第一個(gè)工作草案大約在同一時(shí)間發(fā)布。截至2018年10月，這兩個(gè)CSS模塊仍處于工作選秀狀態(tài)，但是當(dāng)然，我們已經(jīng)大量使用它們

因此，首先是由第三方提供的JavaScript函數(shù)（僅用于簡(jiǎn)單的懸停狀態(tài)）導(dǎo)致CSS中的過(guò)渡和動(dòng)畫，這些函數(shù)允許進(jìn)行精心制作和復(fù)雜的動(dòng)畫 - 許多開發(fā)人員不一定希望考慮的復(fù)雜性，因?yàn)樗麄冃枰焖僭谛马?xiàng)目上移動(dòng)。我們走了一圈；如今，已經(jīng)創(chuàng)建了許多第三方CSS動(dòng)畫庫(kù)來(lái)抵消這種復(fù)雜性。

三個(gè)不同類型的第三方動(dòng)畫庫(kù)

我們?cè)谶@個(gè)新世界中能夠在網(wǎng)頁(yè)和應(yīng)用程序中具有強(qiáng)大，令人興奮和復(fù)雜的動(dòng)畫。關(guān)于如何處理這些新任務(wù)的幾個(gè)不同的想法已經(jīng)走到了最前沿。并不是說(shuō)一種方法比其他任何方法都更好。確實(shí)，每個(gè)都有很多重疊。區(qū)別更多是關(guān)于我們?nèi)绾螢樗麄儗?shí)施和編寫代碼。有些是全javascript的庫(kù)，而另一些則是僅CSS的藏品。

JavaScript庫(kù)

僅通過(guò)JavaScript運(yùn)行的庫(kù)通常提供超出Common CSS動(dòng)畫提供的功能。通常，由于圖書館實(shí)際上可能使用CSS功能作為引擎的一部分，因此存在重疊，但是將其抽象為有利于API。此類庫(kù)的示例是Greensock和Anime.js。您可以通過(guò)查看他們提供的演示來(lái)看到他們提供的內(nèi)容（Greensock在Codepen上有一個(gè)不錯(cuò)的收藏）。它們主要用于高度復(fù)雜的動(dòng)畫，但對(duì)于更基本的動(dòng)畫也很有用。

JavaScript和CSS庫(kù)

有一些第三方庫(kù)主要包括CSS類，但提供了一些JavaScript，以方便您項(xiàng)目中的類別。一個(gè)庫(kù)Micron.js提供了可以在元素上使用的JavaScript API和數(shù)據(jù)屬性。這種類型的庫(kù)允許您輕松使用可以從中選擇的預(yù)制動(dòng)畫。另一個(gè)庫(kù)Motion UI旨在與JavaScript框架一起使用。雖然，它也適用于JavaScript API，預(yù)構(gòu)建類和數(shù)據(jù)屬性的混合物的類似概念。這些類型的庫(kù)提供了預(yù)先構(gòu)建的動(dòng)畫，也可以簡(jiǎn)單地將它們匯總。

CSS庫(kù)

第三種庫(kù)僅是CSS。通常，這只是您通過(guò)HTML中的鏈接標(biāo)簽加載的CSS文件。然后，您可以應(yīng)用并刪除特定的CSS類，以利用提供的動(dòng)畫。這種類型的庫(kù)的兩個(gè)示例是Animate.css和Anmista。也就是說(shuō)，這兩個(gè)特定庫(kù)之間甚至存在重大差異。 Animate.css是一個(gè)總CSS軟件包，而Animista提供了一個(gè)光滑的接口，可以選擇您想要的動(dòng)畫使用提供的代碼。這些庫(kù)通常很容易實(shí)現(xiàn)，但是您必須編寫代碼以利用它們。這些是本文將重點(diǎn)關(guān)注的圖書館的類型。

三種不同類型的CSS動(dòng)畫

是的，有一個(gè)模式；畢竟，三分之一的規(guī)則無(wú)處不在。

在大多數(shù)情況下，使用第三方庫(kù)時(shí)，有三種類型的動(dòng)畫需要考慮。每種類型都適合不同的目的，并有不同的方法來(lái)利用它們。

懸停動(dòng)畫

這些動(dòng)畫旨在涉及某種懸停狀態(tài)。它們通常與按鈕一起使用，但另一種可能性是使用它們來(lái)突出顯示光標(biāo)恰好打開的部分。它們也可以用于焦點(diǎn)狀態(tài)。

注意動(dòng)畫

這些動(dòng)畫旨在用于通常在查看頁(yè)面的人的視覺(jué)中心之外的元素上。動(dòng)畫應(yīng)用于需要注意的顯示部分。對(duì)于需要最終關(guān)注但本質(zhì)上不可怕的事物而言，這種動(dòng)畫本質(zhì)上可能是微妙的。當(dāng)需要立即注意時(shí)，他們也可能會(huì)分散注意力。

過(guò)渡動(dòng)畫

這些動(dòng)畫通常旨在使視圖中的另一個(gè)元素替換，但也可以用于一個(gè)元素。這些通常包括一個(gè)動(dòng)畫，用于“離開”視圖和鏡像動(dòng)畫以“輸入”視圖?？紤]一下逐漸消失。

因此，讓我們介紹每種類型的動(dòng)畫以及如何使用它們的示例。

讓我們懸停！

某些庫(kù)可能已經(jīng)設(shè)置為懸停效果，而有些則將懸停狀態(tài)作為其主要目的。一個(gè)這樣的庫(kù)就是Hover.css，它是一個(gè)插入解決方案，它提供了通過(guò)類名稱應(yīng)用的一系列懸停效果。但是，有時(shí)候，我們想在圖書館中使用動(dòng)畫，該庫(kù)不直接支持：懸停偽級(jí)，因?yàn)檫@可能與全球樣式相抵觸。

在此示例中，我將使用Animate.css提供的TADA動(dòng)畫。它的目的更多是尋求注意力的人，但是對(duì)于此示例來(lái)說(shuō)，它足夠了。如果您要瀏覽庫(kù)的CSS，您會(huì)發(fā)現(xiàn)沒(méi)有：懸停偽級(jí)。因此，我們必須自己以這種方式使它起作用。

TADA班本身就是這樣：

 .tada {
  動(dòng)畫名稱：tada;
}

使此反應(yīng)懸停狀態(tài)反應(yīng)的低矮方法是制作我們自己的本班的本地副本，但將其擴(kuò)展一點(diǎn)。通常，Animate.css是一個(gè)倒入解決方案，因此我們不一定可以選擇編輯原始CSS文件。盡管您愿意，但您可以擁有自己的本地副本。因此，我們僅創(chuàng)建我們需要不同的代碼，并讓庫(kù)處理其余的代碼。

 .TADA-HOVER：HOVER {
  動(dòng)畫名稱：tada;
}

如果我們實(shí)際上想在其他地方使用它，我們可能不應(yīng)該覆蓋原始類名。因此，相反，我們進(jìn)行了一種變體，可以將懸停偽級(jí)放在選擇器上?，F(xiàn)在，我們將庫(kù)所需的動(dòng)畫類以及我們的自定義TADA-HOVER類使用的元素，它將在Hover上播放該動(dòng)畫。

如果您不想以這種方式創(chuàng)建自定義類，但更喜歡JavaScript解決方案，那么有一種相對(duì)簡(jiǎn)單的方法來(lái)處理它。奇怪的是，這與我們之前討論的Dreamweaver的MM_ImagesWap（）方法類似。

 //讓我們使用ID #JS_EXAMPLE選擇元素
var js_example = document.queryselector（'＃js_example'）;

//當(dāng)懸停使用ID #JS_Example的元素時(shí)...
js_example.addeventlistener（'MouseOver'，function（）{
  // ...讓我們?cè)谠刂刑砑觾蓚€(gè)類：動(dòng)畫和tada ...
  this.classlist.add（'animated'，'tada'）;
}）;
// ...然后當(dāng)鼠標(biāo)不在元素上時(shí)刪除這些類。
js_example.addeventlistener（'鼠標(biāo)out'，function（）{
  this.classlist.remove（'animated'，'tada'）;
}）;

實(shí)際上，有多種方法可以根據(jù)上下文來(lái)處理此問(wèn)題。在這里，我們創(chuàng)建了一些事件偵聽器，以等待鼠標(biāo)折疊和鼠標(biāo)輸出事件。然后，這些聽眾根據(jù)需要申請(qǐng)并刪除庫(kù)的動(dòng)畫和TADA類。如您所見，擴(kuò)展第三方圖書館可以以相對(duì)容易的方式完成我們的需求。

我可以請(qǐng)您注意嗎？

第三方庫(kù)可以幫助的另一種動(dòng)畫是尋求注意者。這些動(dòng)畫很有用，因?yàn)槟Ｍ麑⒆⒁饬性陧?yè)面的元素或部分。其中一些示例可能是通知或未填寫所需的表格輸入。這些動(dòng)畫可以是微妙的或直接的。微妙的是，當(dāng)某些東西最終需要關(guān)注但不需要立即解決。直接何時(shí)需要解決問(wèn)題。

一些庫(kù)將這樣的動(dòng)畫作為整個(gè)軟件包的一部分，而有些則是專門為此目的而構(gòu)建的。 Animate.css和Animista都有注意動(dòng)畫的關(guān)注，但它們并不是這些圖書館的主要目的。為此目的構(gòu)建的庫(kù)的一個(gè)示例是CSShake。要使用的哪個(gè)庫(kù)取決于項(xiàng)目的需求以及您希望投資多少時(shí)間來(lái)實(shí)施它們。例如，CSShake準(zhǔn)備好在您的方面遇到麻煩 - 只需根據(jù)需要應(yīng)用課程即可。雖然，如果您已經(jīng)在使用andimate.css之類的庫(kù)，那么您可能不想引入第二個(gè)庫(kù)（用于性能，依賴依賴項(xiàng)等）。

因此，可以使用anistate.css之類的庫(kù)，但需要更多設(shè)置。圖書館的github頁(yè)面有有關(guān)如何執(zhí)行此操作的示例。根據(jù)項(xiàng)目的需求，將這些動(dòng)畫作為尋求注意力的人實(shí)施很簡(jiǎn)單。

對(duì)于一種微妙的動(dòng)畫類型，我們可以擁有一個(gè)只需重復(fù)一系列次數(shù)并停止的動(dòng)畫。這通常涉及添加庫(kù)的類，將動(dòng)畫迭代屬性應(yīng)用于CSS，并等待動(dòng)畫結(jié)束事件清除庫(kù)的類。

這是一個(gè)簡(jiǎn)單的示例，遵循我們之前對(duì)懸停狀態(tài)進(jìn)行的相同模式：

 var pulse = document.queryselector（'＃pulse'）;

函數(shù)playpulse（）{
  pulse.classlist.add（'animated'，'pulse'）;
}

pulse.addeventListener（'animationEnd'，function（）{
  pulse.classlist.remove（'animated'，'pulse'）;
}）;

playpulse（）;

當(dāng)調(diào)用播放函數(shù)時(shí)，應(yīng)用庫(kù)類。 AnimationEnd事件有一個(gè)事件偵聽器，可以刪除庫(kù)的類。通常，這只會(huì)播放一次，但是您可能需要在停止之前多次重復(fù)。 Animate.css不能為此提供課程，但是將CSS屬性應(yīng)用于我們的元素來(lái)處理它很容易。

 #pulse {
  動(dòng)畫題計(jì)：3; / *三次后停止 */
}

這樣，動(dòng)畫將在停止之前播放3次。如果我們需要盡快停止動(dòng)畫，我們可以手動(dòng)刪除AnimationEnd函數(shù)之外的庫(kù)類。圖書館的文檔實(shí)際上提供了一個(gè)可重復(fù)使用功能的示例，用于應(yīng)用動(dòng)畫后刪除它們的類。與上述代碼非常相似。將其擴(kuò)展到將迭代計(jì)數(shù)應(yīng)用于元素時(shí)甚至很容易。

對(duì)于更直接的方法，假設(shè)一個(gè)無(wú)限動(dòng)畫，直到發(fā)生某種用戶互動(dòng)后才會(huì)停止。讓我們假裝單擊元素是啟動(dòng)動(dòng)畫的原因，然后單擊再次停止它。請(qǐng)記住，無(wú)論您還是希望開始并停止動(dòng)畫取決于您。

 var bounce = document.queryselector（'＃bounce'）;

bounce.addeventListener（'click'，function（）{
  如果（！bounce.classlist.contains（'animated'））{
    bounce.classlist.add（'動(dòng)畫'，'bounce'，'infinite'）;
  } 別的 {
    bounce.classlist.remove（'動(dòng)畫'，'bounce'，'infinite'）;
  }
}）;

足夠簡(jiǎn)單。如果應(yīng)用了庫(kù)的“動(dòng)畫”類，單擊元素測(cè)試。如果沒(méi)有，我們將應(yīng)用圖書館類，以便啟動(dòng)動(dòng)畫。如果有課程，我們將其刪除以停止動(dòng)畫。請(qǐng)注意，在階級(jí)列表結(jié)束時(shí)，無(wú)限班級(jí)。值得慶幸的是，Animate.css為我們提供了此功能。如果您選擇的庫(kù)不提供這樣的課程，那么這就是您在CSS中需要的：

 #bounce {
  動(dòng)畫題計(jì)：無(wú)限；
}

這是一個(gè)演示，顯示了該代碼的行為：

將東西移開

在研究本文時(shí)，我發(fā)現(xiàn)過(guò)渡（不要與CSS過(guò)渡混淆）很容易成為第三方庫(kù)中最常見的動(dòng)畫類型。這些是構(gòu)建的簡(jiǎn)單動(dòng)畫，可以允許元素輸入或離開頁(yè)面?，F(xiàn)代單頁(yè)應(yīng)用程序中看到的一個(gè)非常常見的模式是讓一個(gè)元素離開頁(yè)面，而另一個(gè)元素通過(guò)輸入頁(yè)面替代了頁(yè)面。想一想第一個(gè)元素逐漸消失，第二種褪色。這可能是用新數(shù)據(jù)替換舊數(shù)據(jù)，以序列移至下一個(gè)面板，或用路由器從一個(gè)頁(yè)面移到另一頁(yè)。莎拉·德拉斯納（Sarah Drasner）和喬治·馬爾凱克（Georgy Marchuk）都有很好的例子，說(shuō)明了這類過(guò)渡。

在大多數(shù)情況下，動(dòng)畫庫(kù)將無(wú)法提供在過(guò)渡動(dòng)畫期間刪除和添加元素的方法。提供其他JavaScript的庫(kù)實(shí)際上可能具有此功能，但是由于大多數(shù)沒(méi)有，我們將討論如何處理此功能。

插入一個(gè)元素

在此示例中，我們將再次將Animate.css用作我們的庫(kù)。在這種情況下，我將使用Fadeindown動(dòng)畫。

現(xiàn)在，請(qǐng)記住有很多方法可以處理將元素插入DOM，我不想在這里介紹它們。我將展示如何利用動(dòng)畫使插入更加更好，更自然，而不是簡(jiǎn)單地彈出視圖。對(duì)于Animate.css（可能是許多其他庫(kù)），使用動(dòng)畫插入元素非常容易。

令插入= document.createelement（'div'）;
insertelement.innertext ='此div已插入';
insertelement.classlist.add（'animated'，'fadeindown'）;

insertelement.AddeventListener（'AnimationEnd'，function（）{
  this.classlist.remove（'animated'，'fadeindown'）;
}）;

document.body.append（插入）;

但是，您決定創(chuàng)建元素并不重要。您只需要確保在插入元素之前已經(jīng)應(yīng)用了所需的類。然后，它可以很好地安裝到位。我還包括了一個(gè)刪除課程的AnimationEnd活動(dòng)的活動(dòng)聽眾。像往常一樣，有幾種方法可以做到這一點(diǎn)，這可能是處理它的最直接方法。刪除課程的原因是，如果我們?cè)敢?，可以更輕松地扭轉(zhuǎn)過(guò)程。我們不希望進(jìn)入動(dòng)畫與離開動(dòng)畫競(jìng)爭(zhēng)。

刪除單個(gè)元素

刪除單個(gè)元素類似于插入元素。元素已經(jīng)存在，因此我們只應(yīng)用所需的動(dòng)畫類。然后，在AnimationEnd事件中，我們從DOM中刪除元素。在此示例中，我們將使用Animate.css的FadeOutDown動(dòng)畫，因?yàn)樗梢耘cFadeindown動(dòng)畫一起使用。

令removelement = document.queryselector（'＃removeElement'）;

removelement.AddeventListener（'animationEnd'，function（）{
  this.remove（）;
}）;

removelement.classlist.add（'animated'，'fadeoutdown'）;

如您所見，我們針對(duì)元素，添加類，然后在動(dòng)畫末端刪除元素。

所有這一切的問(wèn)題是，通過(guò)以這種方式插入和刪除元素會(huì)導(dǎo)致頁(yè)面上的其他元素跳動(dòng)進(jìn)行調(diào)整。您必須以某種方式來(lái)考慮這一點(diǎn)，很可能在CSS和頁(yè)面的布局中為元素留出恒定的空間。

走開我的路，我來(lái)了！

現(xiàn)在，我們將交換兩個(gè)元素，一個(gè)要換成另一個(gè)元素。有幾種處理此操作的方法，但是我將提供一個(gè)示例，從本質(zhì)上講，將前兩個(gè)示例結(jié)合在一起。

我將詳細(xì)介紹JavaScript，以解釋其工作原理。首先，我們緩存了對(duì)兩個(gè)元素的按鈕和容器的引用。然后，我們創(chuàng)建兩個(gè)盒子，這些框?qū)⒔粨Q在容器中。

令button = document.queryselector（'button'）;
令container = document.queryselector（'。container'）;
令box1 = document.createelement（'div'）;
令box2 = document.createelement（'div'）;

我有一個(gè)通用功能，可用于刪除每個(gè)AnimationEnd事件的動(dòng)畫類。

令removeClasses = function（）{
  box1.classlist.remove（'動(dòng)畫'，'fadeoutright'，'fadeinleft'）;
  Box2.Classlist.Remove（'animated'，'fadeoutright'，'fadeinleft'）;
}

下一個(gè)功能是交換功能的大部分。首先，我們確定正在顯示的當(dāng)前框?；诖耍覀兛梢酝茢喑鲭x開和進(jìn)入元素。離開元素會(huì)獲得事件偵聽器，該偵聽器首先刪除了稱為SwitchElements功能，因此我們不會(huì)在動(dòng)畫循環(huán)中發(fā)現(xiàn)自己。然后，由于動(dòng)畫完成了，我們從容器中刪除了離開元素。接下來(lái)，我們將動(dòng)畫類添加到輸入元素并將其附加到容器中，以便將其動(dòng)畫到位。

令switchElements = function（）{
  令CurrentElement = document.queryselector（'。container .box'）;
  讓weftElement = CurrentElement.ClassList.Contains（'Box1'）？ Box1：box2;
  令enterlement = weftElement === box1？ Box2：Box1;
  
  wellElement.RemoveEventListener（'AnimationEnd'，SwitchElements）;
  weftElement.Remove（）;
  Enterlement.Classlist.Add（'animated'，'fadeinleft'）;
  container.append（Enterlement）;
}

我們需要為兩個(gè)框進(jìn)行一些通用設(shè)置。另外，我們將第一個(gè)盒子附加到容器中。

 box1.classlist.add（'box'，'box1'）;
Box1.AddeventListener（'AnimationEnd'，removeClasses）;
Box2.Classlist.Add（'Box'，'Box2'）;
Box2.AddeventListener（'AnimationEnd'，removeClasses）;

Container.AppendChild（Box1）;

最后，我們有一個(gè)點(diǎn)擊事件的偵聽器，可以使用該按鈕進(jìn)行切換。從技術(shù)上講，這些事件的序列如何開始取決于您。對(duì)于此示例，我決定單擊一個(gè)簡(jiǎn)單的按鈕。我找出當(dāng)前正在顯示的框，將要離開哪個(gè)框，以應(yīng)用適當(dāng)?shù)念愐允蛊鋭?dòng)畫。然后，我將一個(gè)事件偵聽器用于AnimationEnd事件，該事件調(diào)用上面顯示的SwitchElement函數(shù)，該功能處理實(shí)際交換。

 button.AddeventListener（'click'，function（）{
  令CurrentElement = document.queryselector（'。container .box'）;
  
  if（currentelement.classlist.contains（'box1'））{
    box1.classlist.add（'animated'，'fadeoutright'）;
    Box1.AddeventListener（'AnimationEnd'，SwitchElements）;
  } 別的 {
    box2.classlist.add（'animated'，'fadeoutright'）;
    box2.AddeventListener（'AnimationEnd'，SwitchElements）;
  }
}

這個(gè)示例的一個(gè)明顯問(wèn)題是，對(duì)于這種情況，它非?？贪宓鼐幋a。雖然，在不同情況下，它很容易擴(kuò)展和調(diào)整。因此，該示例在理解處理此類任務(wù)的一種方法方面很有用。值得慶幸的是，一些動(dòng)畫庫(kù)（例如MotionUi）提供了一些JavaScript，以幫助元素過(guò)渡。要考慮的另一件事是，某些JavaScript框架（例如Vuejs）具有有助于動(dòng)畫元素過(guò)渡的功能。

我還創(chuàng)建了另一個(gè)提供更靈活的系統(tǒng)的示例。它由一個(gè)容器組成，該容器存儲(chǔ)引用以離開并輸入具有數(shù)據(jù)屬性的動(dòng)畫。該容器包含兩個(gè)元素，這些元素將打開命令的位置。構(gòu)建此示例的方式是，通過(guò)JavaScript在數(shù)據(jù)屬性中很容易更改動(dòng)畫。我在演示中也有兩個(gè)容器。一個(gè)使用Animate.css，另一個(gè)使用Animista進(jìn)行動(dòng)畫。這是一個(gè)很大的例子，所以我不會(huì)在這里檢查代碼。但是它對(duì)它進(jìn)行了大量評(píng)論，因此，看看是否有興趣。

花點(diǎn)時(shí)間考慮…

每個(gè)人都真的想看所有這些動(dòng)畫嗎？有些人可以考慮我們的動(dòng)畫過(guò)高和不必要的，但是對(duì)于某些人來(lái)說(shuō)，他們實(shí)際上可能引起問(wèn)題。不久前，Webkit引入了偏愛(ài)的動(dòng)作媒體查詢，以協(xié)助可能的前庭譜系障礙問(wèn)題。埃里克·貝利（Eric Bailey）還發(fā)布了媒體查詢的不錯(cuò)介紹，以及對(duì)最佳實(shí)踐的考慮。絕對(duì)閱讀這些。

那么，您的動(dòng)畫庫(kù)是否支持偏愛(ài)的動(dòng)作？如果文檔沒(méi)有說(shuō)它確實(shí)如此，那么您可能必須假設(shè)它不會(huì)。雖然，很容易檢查庫(kù)的代碼以查看是否有媒體查詢的內(nèi)容。例如，Animate.css在_base.scss部分文件中具有它。

 @Media（print），（預(yù)先降低的動(dòng)作）{
  。
    動(dòng)畫：不設(shè)置！
    過(guò)渡：無(wú)！
  }
}

如果圖書館不支持它，那么這一點(diǎn)代碼還提供了一個(gè)很好的示例。如果庫(kù)有一個(gè)通用類，它使用的是Animate.css使用“動(dòng)畫”，那么您就可以針對(duì)該類。如果它不支持此類類，則您必須定位實(shí)際的動(dòng)畫類或?yàn)榇四康膭?chuàng)建自己的自定義類。

 .scale-up-center {
  動(dòng)畫：尺度上的0.4s立方bezier（0.390，0.575，0.565，1.000）均兩者；
}

@KeyFrames縮放式中心{
  0％{變換：比例尺（0.5）; }
  100％{變換：比例（1）; }
}

@Media（print），（預(yù)先降低的動(dòng)作）{
  .scale-up-center {
    動(dòng)畫：不設(shè)置！
    過(guò)渡：無(wú)！
  }
}

如您所見，我只是使用了Animate.css提供的示例，并針對(duì)Animista的動(dòng)畫類。請(qǐng)記住，您必須為您選擇從庫(kù)中使用的每個(gè)動(dòng)畫類重復(fù)此操作。盡管在埃里克（Eric）的后續(xù)作品中，他建議將所有動(dòng)畫視為漸進(jìn)式增強(qiáng)功能，這可能是減少代碼并使用戶體驗(yàn)更容易獲得的一種方法。

讓框架為您繁重

在許多方面，諸如React和Vue之類的各種框架可以使用第三方CSS動(dòng)畫制作，而不是使用Vanilla JavaScript，這主要是因?yàn)槟槐厥謩?dòng)匯總類交換或AnimationEnd事件。您可以利用框架已經(jīng)提供的功能。使用框架的優(yōu)點(diǎn)在于，它們還提供了幾種不同的方法來(lái)處理這些動(dòng)畫，具體取決于項(xiàng)目的需求。下面的示例只是選項(xiàng)的一個(gè)小例子。

懸停效果

對(duì)于懸停效果，我建議用CSS（如上所述）將它們?cè)O(shè)置為更好的方法。如果您確實(shí)需要在框架中（例如Vue）中使用JavaScript解決方案，那將是這樣的：

 <button over event well>
  塔達(dá)
</button>

方法： {
  結(jié)束：函數(shù)（e，type）{
    e.target.classlist.add（'animated'，type）;
  }，，
  離開：功能（e，type）{
    e.target.classlist.remove（'animated'，type）;
  }
}

與上面的香草JavaScript解決方案沒(méi)有太大不同。另外，像以前一樣，有很多處理此問(wèn)題的方法。

注意者

設(shè)置引人注目的人實(shí)際上更容易。在這種情況下，我們只是使用VUE以示例來(lái)應(yīng)用所需的類：

 <div>脈沖</div>

<div>彈跳</div>

在脈沖示例中，每當(dāng)布爾斯iSpulse為真時(shí)，都會(huì)應(yīng)用這兩個(gè)類。在彈跳示例中，每當(dāng)布爾值isbounce為真時(shí)，都會(huì)應(yīng)用動(dòng)畫和彈跳類。無(wú)論如何，都可以使用無(wú)限的階級(jí)，因此我們可以進(jìn)行永無(wú)止境的彈跳，直到isbounce boolean恢復(fù)為虛假。

過(guò)渡

值得慶幸的是，Vue的過(guò)渡組件提供了一種使用自定義過(guò)渡類使用第三方動(dòng)畫類的簡(jiǎn)便方法。其他庫(kù)，例如React，可以提供類似的功能或附加組件。為了利用VUE中的動(dòng)畫類，我們只是在過(guò)渡組件中實(shí)現(xiàn)它們。

 
  <div v-if="“" toggle key="“" if>如果exam??ple </div>
  <div v-else key="“" else> else示例</div>

使用Animate.css，我們僅應(yīng)用必要的類。對(duì)于企業(yè)，我們將與Fadeindown一起應(yīng)用所需的動(dòng)畫課。對(duì)于休假活動(dòng)，我們將應(yīng)用所需的動(dòng)畫班以及vadeoutdown應(yīng)用。在過(guò)渡序列期間，這些類在適當(dāng)?shù)臅r(shí)間插入。 Vue為我們處理和刪除課程的插入和刪除。

有關(guān)在JavaScript框架中使用第三方動(dòng)畫庫(kù)的更復(fù)雜示例，請(qǐng)?zhí)剿鞔隧?xiàng)目：

加入聚會(huì)！

這是等待您項(xiàng)目的可能性的一種小品味，因?yàn)槟抢镉性S多第三方CSS動(dòng)畫庫(kù)可以探索。有些是徹底，怪異的，特定的，令人討厭的，或者只是直率的。有用于復(fù)雜JavaScript動(dòng)畫的庫(kù)，例如Greensock或Anime.js。甚至有庫(kù)可以針對(duì)元素中的字符。

希望所有這些都會(huì)激發(fā)您在創(chuàng)建自己的CSS動(dòng)畫的途中使用這些圖書館。

以上是將第三方動(dòng)畫庫(kù)集成到項(xiàng)目的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！