將第三方動畫庫集成到項目

創建基於CSS的動畫和過渡可能是一個挑戰。它們可能很複雜且耗時。是否需要進行一個很少時間來調整完美過渡的項目？考慮使用現成的動畫等待使用的第三方CSS動畫庫。但是，您可能在想：它們是什麼？他們提供什麼？我如何使用它們？

好吧，讓我們找出答案。

一個（一種）簡短的歷史：懸停

曾經有一段時間，懸停狀態的概念就是今天提供的概念。實際上，對光標傳遞在元素頂部的反應的想法或不存在。提出並實施了提供此功能的不同方法。在某種程度上，這個小型功能為CSS能夠為頁面上的元素提供動畫的想法打開了大門。隨著時間的流逝，這些功能可能會增加複雜性，從而導致CSS動畫庫。

Macromedia的Dreamweaver於1997年12月推出，並提供了一個簡單的功能，即懸停的圖像交換。此功能是用JavaScript函數實現的，該功能將由編輯器嵌入HTML中。該功能名為MM_SWAPIMAGE（），已成為Web Design的一些民俗。即使在Dreamweaver之外，這也是一個易於使用的腳本，而且它的受歡迎程度仍導致它仍在使用。在我對本文的最初研究中，我發現了一個與此功能有關的問題，從2018年開始，關於Adobe的Dreamweaver （Adobe在2005年收購了Macromedia）幫助論壇。

JavaScript函數將通過基於MouseOver和MouseOut事件更改SRC屬性將圖像與另一個圖像交換。實施時，看起來像這樣：

 <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="將第三方動畫庫集成到項目" >
</a>

按照當今的標準，使用JavaScript實現這一目標非常容易，我們中的許多人實際上可以在睡眠中做到這一點。但是，請考慮到JavaScript當時仍然是這種新的腳本語言（1995年創建），有時從瀏覽器到瀏覽器看上去和行為不同。創建跨瀏覽器JavaScript並不總是一件容易的事，並不是每個人都創建網頁甚至寫JavaScript。 （雖然這確實發生了變化。）Dreamweaver通過編輯器中的菜單提供了此功能，並且網絡設計師甚至不需要編寫JavaScript。它基於一組“行為”，可以從不同選項的列表中選擇。這些選項可以通過一組目標瀏覽器過濾； 3.0瀏覽器，4.0瀏覽器，I 3.0，I 4.0，Netscape 3.0，Netscape 4.0。啊，過去的美好時光。

Dreamweaver首次發布後約一年，W3C的CSS2規範提到了：在1998年1月的工作草案中懸停。在錨點鏈接方面是特別提到的，但該語言表明它可能已應用於其他元素。出於大多數目的，似乎這個偽選擇器將是MM_SWAPIMAGE（）的簡單替代方案的開始，因為背景圖像在同一草稿中。儘管瀏覽器支持是一個問題，因為花了數年的時間才能適當地支持CSS2，以使其成為許多網頁設計師的可行選擇。終於有了CSS2.1的W3C建議，這可能被認為是我們所知道的“現代” CSS的基礎，該基礎於2011年6月發布。

在這一切的中間， JQuery出現在2006年。幸運的是，JQuery在簡化不同瀏覽器中的Javascript方面走了很長一段路。我們的故事感興趣的一件事，第一個版本的jQuery提供了Animate（）方法。使用此方法，您可以隨時在任何元素上對CSS屬性進行動畫動畫。不只是懸停。由於其純粹的知名度，這種方法暴露了對瀏覽器中更堅固的CSS解決方案的需求 - 這種解決方案不需要由於瀏覽器限製而導致的JavaScript庫，該解決方案並不總是非常性能。

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

因此，首先是由第三方提供的JavaScript函數（僅用於簡單的懸停狀態）導致CSS中的過渡和動畫，這些函數允許進行精心製作和復雜的動畫 - 許多開發人員不一定希望考慮的複雜性，因為他們需要快速在新項目上移動。我們走了一圈；如今，已經創建了許多第三方CSS動畫庫來抵消這種複雜性。

三個不同類型的第三方動畫庫

我們在這個新世界中能夠在網頁和應用程序中具有強大，令人興奮和復雜的動畫。關於如何處理這些新任務的幾個不同的想法已經走到了最前沿。並不是說一種方法比其他任何方法都更好。確實，每個都有很多重疊。區別更多是關於我們如何為他們實施和編寫代碼。有些是全javascript的庫，而另一些則是僅CSS的藏品。

JavaScript庫

僅通過JavaScript運行的庫通常提供超出Common CSS動畫提供的功能。通常，由於圖書館實際上可能使用CSS功能作為引擎的一部分，因此存在重疊，但是將其抽象為有利於API。此類庫的示例是Greensock和Anime.js。您可以通過查看他們提供的演示來看到他們提供的內容（Greensock在Codepen上有一個不錯的收藏）。它們主要用於高度複雜的動畫，但對於更基本的動畫也很有用。

JavaScript和CSS庫

有一些第三方庫主要包括CSS類，但提供了一些JavaScript，以方便您項目中的類別。一個庫Micron.js提供了可以在元素上使用的JavaScript API和數據屬性。這種類型的庫允許您輕鬆使用可以從中選擇的預製動畫。另一個庫Motion UI旨在與JavaScript框架一起使用。雖然，它也適用於JavaScript API，預構建類和數據屬性的混合物的類似概念。這些類型的庫提供了預先構建的動畫，也可以簡單地將它們匯總。

CSS庫

第三種庫僅是CSS。通常，這只是您通過HTML中的鏈接標籤加載的CSS文件。然後，您可以應用並刪除特定的CSS類，以利用提供的動畫。這種類型的庫的兩個示例是Animate.css和Anmista。也就是說，這兩個特定庫之間甚至存在重大差異。 Animate.css是一個總CSS軟件包，而Animista提供了一個光滑的接口，可以選擇您想要的動畫使用提供的代碼。這些庫通常很容易實現，但是您必須編寫代碼以利用它們。這些是本文將重點關注的圖書館的類型。

三種不同類型的CSS動畫

是的，有一個模式；畢竟，三分之一的規則無處不在。

在大多數情況下，使用第三方庫時，有三種類型的動畫需要考慮。每種類型都適合不同的目的，並有不同的方法來利用它們。

懸停動畫

這些動畫旨在涉及某種懸停狀態。它們通常與按鈕一起使用，但另一種可能性是使用它們來突出顯示光標恰好打開的部分。它們也可以用於焦點狀態。

注意動畫

這些動畫旨在用於通常在查看頁面的人的視覺中心之外的元素上。動畫應用於需要注意的顯示部分。對於需要最終關注但本質上不可怕的事物而言，這種動畫本質上可能是微妙的。當需要立即註意時，他們也可能會分散注意力。

過渡動畫

這些動畫通常旨在使視圖中的另一個元素替換，但也可以用於一個元素。這些通常包括一個動畫，用於“離開”視圖和鏡像動畫以“輸入”視圖。考慮一下逐漸消失。

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

讓我們懸停！

某些庫可能已經設置為懸停效果，而有些則將懸停狀態作為其主要目的。一個這樣的庫就是Hover.css，它是一個插入解決方案，它提供了通過類名稱應用的一系列懸停效果。但是，有時候，我們想在圖書館中使用動畫，該庫不直接支持：懸停偽級，因為這可能與全球樣式相抵觸。

在此示例中，我將使用Animate.css提供的TADA動畫。它的目的更多是尋求注意力的人，但是對於此示例來說，它足夠了。如果您要瀏覽庫的CSS，您會發現沒有：懸停偽級。因此，我們必須自己以這種方式使它起作用。

TADA班本身就是這樣：

 .tada {
  動畫名稱：tada;
}

使此反應懸停狀態反應的低矮方法是製作我們自己的本班的本地副本，但將其擴展一點。通常，Animate.css是一個倒入解決方案，因此我們不一定可以選擇編輯原始CSS文件。儘管您願意，但您可以擁有自己的本地副本。因此，我們僅創建我們需要不同的代碼，並讓庫處理其餘的代碼。

 .TADA-HOVER：HOVER {
  動畫名稱：tada;
}

如果我們實際上想在其他地方使用它，我們可能不應該覆蓋原始類名。因此，相反，我們進行了一種變體，可以將懸停偽級放在選擇器上。現在，我們將庫所需的動畫類以及我們的自定義TADA-HOVER類使用的元素，它將在Hover上播放該動畫。

如果您不想以這種方式創建自定義類，但更喜歡JavaScript解決方案，那麼有一種相對簡單的方法來處理它。奇怪的是，這與我們之前討論的Dreamweaver的MM_ImagesWap（）方法類似。

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

//當懸停使用ID #JS_Example的元素時...
js_example.addeventlistener（'MouseOver'，function（）{
  // ...讓我們在元素中添加兩個類：動畫和tada ...
  this.classlist.add（'animated'，'tada'）;
}）;
// ...然後當鼠標不在元素上時刪除這些類。
js_example.addeventlistener（'鼠標out'，function（）{
  this.classlist.remove（'animated'，'tada'）;
}）;

實際上，有多種方法可以根據上下文來處理此問題。在這裡，我們創建了一些事件偵聽器，以等待鼠標折疊和鼠標輸出事件。然後，這些聽眾根據需要申請並刪除庫的動畫和TADA類。如您所見，擴展第三方圖書館可以以相對容易的方式完成我們的需求。

我可以請您注意嗎？

第三方庫可以幫助的另一種動畫是尋求注意者。這些動畫很有用，因為您希望將注意力集中在頁面的元素或部分。其中一些示例可能是通知或未填寫所需的表格輸入。這些動畫可以是微妙的或直接的。微妙的是，當某些東西最終需要關注但不需要立即解決。直接何時需要解決問題。

一些庫將這樣的動畫作為整個軟件包的一部分，而有些則是專門為此目的而構建的。 Animate.css和Animista都有註意動畫的關注，但它們並不是這些圖書館的主要目的。為此目的構建的庫的一個示例是CSShake。要使用的哪個庫取決於項目的需求以及您希望投資多少時間來實施它們。例如，CSShake準備好在您的方面遇到麻煩 - 只需根據需要應用課程即可。雖然，如果您已經在使用andimate.css之類的庫，那麼您可能不想引入第二個庫（用於性能，依賴依賴項等）。

因此，可以使用anistate.css之類的庫，但需要更多設置。圖書館的github頁面有有關如何執行此操作的示例。根據項目的需求，將這些動畫作為尋求注意力的人實施很簡單。

對於一種微妙的動畫類型，我們可以擁有一個只需重複一系列次數並停止的動畫。這通常涉及添加庫的類，將動畫迭代屬性應用於CSS，並等待動畫結束事件清除庫的類。

這是一個簡單的示例，遵循我們之前對懸停狀態進行的相同模式：

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

函數playpulse（）{
  pulse.classlist.add（'animated'，'pulse'）;
}

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

playpulse（）;

當調用播放函數時，應用庫類。 AnimationEnd事件有一個事件偵聽器，可以刪除庫的類。通常，這只會播放一次，但是您可能需要在停止之前多次重複。 Animate.css不能為此提供課程，但是將CSS屬性應用於我們的元素來處理它很容易。

 #pulse {
  動畫題計：3; / *三次後停止 */
}

這樣，動畫將在停止之前播放3次。如果我們需要盡快停止動畫，我們可以手動刪除AnimationEnd函數之外的庫類。圖書館的文檔實際上提供了一個可重複使用功能的示例，用於應用動畫後刪除它們的類。與上述代碼非常相似。將其擴展到將迭代計數應用於元素時甚至很容易。

對於更直接的方法，假設一個無限動畫，直到發生某種用戶互動後才會停止。讓我們假裝單擊元素是啟動動畫的原因，然後單擊再次停止它。請記住，無論您還是希望開始並停止動畫取決於您。

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

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

足夠簡單。如果應用了庫的“動畫”類，單擊元素測試。如果沒有，我們將應用圖書館類，以便啟動動畫。如果有課程，我們將其刪除以停止動畫。請注意，在階級列表結束時，無限班級。值得慶幸的是，Animate.css為我們提供了此功能。如果您選擇的庫不提供這樣的課程，那麼這就是您在CSS中需要的：

 #bounce {
  動畫題計：無限；
}

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

將東西移開

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

在大多數情況下，動畫庫將無法提供在過渡動畫期間刪除和添加元素的方法。提供其他JavaScript的庫實際上可能具有此功能，但是由於大多數沒有，我們將討論如何處理此功能。

插入一個元素

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

現在，請記住有很多方法可以處理將元素插入DOM，我不想在這裡介紹它們。我將展示如何利用動畫使插入更加更好，更自然，而不是簡單地彈出視圖。對於Animate.css（可能是許多其他庫），使用動畫插入元素非常容易。

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

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

document.body.append（插入）;

但是，您決定創建元素並不重要。您只需要確保在插入元素之前已經應用了所需的類。然後，它可以很好地安裝到位。我還包括了一個刪除課程的AnimationEnd活動的活動聽眾。像往常一樣，有幾種方法可以做到這一點，這可能是處理它的最直接方法。刪除課程的原因是，如果我們願意，可以更輕鬆地扭轉過程。我們不希望進入動畫與離開動畫競爭。

刪除單個元素

刪除單個元素類似於插入元素。元素已經存在，因此我們只應用所需的動畫類。然後，在AnimationEnd事件中，我們從DOM中刪除元素。在此示例中，我們將使用Animate.css的FadeOutDown動畫，因為它可以與Fadeindown動畫一起使用。

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

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

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

如您所見，我們針對元素，添加類，然後在動畫末端刪除元素。

所有這一切的問題是，通過以這種方式插入和刪除元素會導致頁面上的其他元素跳動進行調整。您必須以某種方式來考慮這一點，很可能在CSS和頁面的佈局中為元素留出恆定的空間。

走開我的路，我來了！

現在，我們將交換兩個元素，一個要換成另一個元素。有幾種處理此操作的方法，但是我將提供一個示例，從本質上講，將前兩個示例結合在一起。

我將詳細介紹JavaScript，以解釋其工作原理。首先，我們緩存了對兩個元素的按鈕和容器的引用。然後，我們創建兩個盒子，這些框將交換在容器中。

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

我有一個通用功能，可用於刪除每個AnimationEnd事件的動畫類。

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

下一個功能是交換功能的大部分。首先，我們確定正在顯示的當前框。基於此，我們可以推斷出離開和進入元素。離開元素會獲得事件偵聽器，該偵聽器首先刪除了稱為SwitchElements功能，因此我們不會在動畫循環中發現自己。然後，由於動畫完成了，我們從容器中刪除了離開元素。接下來，我們將動畫類添加到輸入元素並將其附加到容器中，以便將其動畫到位。

令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）;
}

我們需要為兩個框進行一些通用設置。另外，我們將第一個盒子附加到容器中。

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

Container.AppendChild（Box1）;

最後，我們有一個點擊事件的偵聽器，可以使用該按鈕進行切換。從技術上講，這些事件的序列如何開始取決於您。對於此示例，我決定單擊一個簡單的按鈕。我找出當前正在顯示的框，將要離開哪個框，以應用適當的類以使其動畫。然後，我將一個事件偵聽器用於AnimationEnd事件，該事件調用上面顯示的SwitchElement函數，該功能處理實際交換。

 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）;
  }
}

這個示例的一個明顯問題是，對於這種情況，它非常刻板地編碼。雖然，在不同情況下，它很容易擴展和調整。因此，該示例在理解處理此類任務的一種方法方面很有用。值得慶幸的是，一些動畫庫（例如MotionUi）提供了一些JavaScript，以幫助元素過渡。要考慮的另一件事是，某些JavaScript框架（例如Vuejs）具有有助於動畫元素過渡的功能。

我還創建了另一個提供更靈活的系統的示例。它由一個容器組成，該容器存儲引用以離開並輸入具有數據屬性的動畫。該容器包含兩個元素，這些元素將打開命令的位置。構建此示例的方式是，通過JavaScript在數據屬性中很容易更改動畫。我在演示中也有兩個容器。一個使用Animate.css，另一個使用Animista進行動畫。這是一個很大的例子，所以我不會在這裡檢查代碼。但是它對它進行了大量評論，因此，看看是否有興趣。

花點時間考慮…

每個人都真的想看所有這些動畫嗎？有些人可以考慮我們的動畫過高和不必要的，但是對於某些人來說，他們實際上可能引起問題。不久前，Webkit引入了偏愛的動作媒體查詢，以協助可能的前庭譜系障礙問題。埃里克·貝利（Eric Bailey）還發布了媒體查詢的不錯介紹，以及對最佳實踐的考慮。絕對閱讀這些。

那麼，您的動畫庫是否支持偏愛的動作？如果文檔沒有說它確實如此，那麼您可能必須假設它不會。雖然，很容易檢查庫的代碼以查看是否有媒體查詢的內容。例如，Animate.css在_base.scss部分文件中具有它。

 @Media（print），（預先降低的動作）{
  。
    動畫：不設置！
    過渡：無！
  }
}

如果圖書館不支持它，那麼這一點代碼還提供了一個很好的示例。如果庫有一個通用類，它使用的是Animate.css使用“動畫”，那麼您就可以針對該類。如果它不支持此類類，則您必須定位實際的動畫類或為此目的創建自己的自定義類。

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

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

@Media（print），（預先降低的動作）{
  .scale-up-center {
    動畫：不設置！
    過渡：無！
  }
}

如您所見，我只是使用了Animate.css提供的示例，並針對Animista的動畫類。請記住，您必須為您選擇從庫中使用的每個動畫類重複此操作。儘管在埃里克（Eric）的後續作品中，他建議將所有動畫視為漸進式增強功能，這可能是減少代碼並使用戶體驗更容易獲得的一種方法。

讓框架為您繁重

在許多方面，諸如React和Vue之類的各種框架可以使用第三方CSS動畫製作，而不是使用Vanilla JavaScript，這主要是因為您不必手動匯總類交換或AnimationEnd事件。您可以利用框架已經提供的功能。使用框架的優點在於，它們還提供了幾種不同的方法來處理這些動畫，具體取決於項目的需求。下面的示例只是選項的一個小例子。

懸停效果

對於懸停效果，我建議用CSS（如上所述）將它們設置為更好的方法。如果您確實需要在框架中（例如Vue）中使用JavaScript解決方案，那將是這樣的：

 <button over event well>
  塔達
</button>

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

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

注意者

設置引人注目的人實際上更容易。在這種情況下，我們只是使用VUE以示例來應用所需的類：

 <div>脈衝</div>

<div>彈跳</div>

在脈衝示例中，每當布爾斯iSpulse為真時，都會應用這兩個類。在彈跳示例中，每當布爾值isbounce為真時，都會應用動畫和彈跳類。無論如何，都可以使用無限的階級，因此我們可以進行永無止境的彈跳，直到isbounce boolean恢復為虛假。

過渡

值得慶幸的是，Vue的過渡組件提供了一種使用自定義過渡類使用第三方動畫類的簡便方法。其他庫，例如React，可以提供類似的功能或附加組件。為了利用VUE中的動畫類，我們只是在過渡組件中實現它們。

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

使用Animate.css，我們僅應用必要的類。對於企業，我們將與Fadeindown一起應用所需的動畫課。對於休假活動，我們將應用所需的動畫班以及vadeoutdown應用。在過渡序列期間，這些類在適當的時間插入。 Vue為我們處理和刪除課程的插入和刪除。

有關在JavaScript框架中使用第三方動畫庫的更複雜示例，請探索此項目：

加入聚會！

這是等待您項目的可能性的一種小品味，因為那裡有許多第三方CSS動畫庫可以探索。有些是徹底，怪異的，特定的，令人討厭的，或者只是直率的。有用於復雜JavaScript動畫的庫，例如Greensock或Anime.js。甚至有庫可以針對元素中的字符。

希望所有這些都會激發您在創建自己的CSS動畫的途中使用這些圖書館。

以上是將第三方動畫庫集成到項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！