1.前言

紅花崗網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),紅花崗網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為紅花崗成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的紅花崗做網(wǎng)站的公司定做！

做項(xiàng)目就難免會(huì)開(kāi)發(fā)交互效果或者特效，而我最近開(kāi)發(fā)的項(xiàng)目一直在使用vue，開(kāi)發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開(kāi)發(fā)，過(guò)程中發(fā)現(xiàn)使用vue+css3開(kāi)發(fā)特效，和javascript/jquery+css3的思維方式不一樣，但是比javascript/jquery+css3簡(jiǎn)單一點(diǎn)點(diǎn)。今天就分享三個(gè)簡(jiǎn)單的小實(shí)例，希望能起到拓展思維的作用，讓大家明白vue+css3應(yīng)該怎樣開(kāi)發(fā)交互效果！如果大家有什么好的建議，或者覺(jué)得我哪里寫(xiě)錯(cuò)了，歡迎指出！

1.文章上面的代碼，雖然代碼很簡(jiǎn)單，不難理解，但是也是建議大家邊寫(xiě)邊看，這樣不會(huì)混亂。
2.文章所提及的小實(shí)例，都是很基礎(chǔ)的，大家可以參照自己的想法進(jìn)行擴(kuò)展，或者修改，可能會(huì)有意想不到的效果。我寫(xiě)這類型的文章也是想授人以漁，不是授人以魚(yú)！
3.這幾個(gè)實(shí)例，摘自我自己的平常練習(xí)的項(xiàng)目，代碼已經(jīng)提到github上面了(vue-demos)。歡迎大家star。

2.開(kāi)場(chǎng)小動(dòng)畫(huà)運(yùn)行效果

gif圖模糊效果看著跟實(shí)際效果不太一樣！大家注意！

原理分析

說(shuō)到原理分析，其實(shí)也沒(méi)什么可以分析的，就是在頁(yè)面是下面這個(gè)狀態(tài)的時(shí)候，把文字替換掉。至于看到字體縮成一團(tuán)，就是letter-spacing這個(gè)css屬性的控制效果。字體模糊就是filter: blur()這個(gè)css屬性的控制效果！看到有逐漸的變化，就是css3動(dòng)畫(huà)（animation）的效果

下面簡(jiǎn)單分析下，這個(gè)動(dòng)畫(huà)的幾個(gè)步驟，從下面看到，這個(gè)動(dòng)畫(huà)一共8個(gè)步驟。

這下就清晰明了了，我們要在下圖這個(gè)瞬間開(kāi)始改變文字，也就是頁(yè)面加載了兩秒后，動(dòng)畫(huà)執(zhí)行了兩次后就開(kāi)始改變文字。然后每隔兩秒改變一次文字，直到最后！

下面給出vue和javascript兩種方式的代碼，看下哪種方式更加的簡(jiǎn)單！

vue方式

  
  




  
{{testText}}

javascript方式

  
  




  
歡迎瀏覽

3.導(dǎo)航滑塊運(yùn)行效果

原理分析

首先，下面是頁(yè)面初始化的時(shí)候，橙色滑塊的位置

鼠標(biāo)放到第二個(gè)tab上面，大家可以看到，橙色滑塊就是向右偏移了一個(gè)tab的距離

鼠標(biāo)放到第三個(gè)tab上面，大家可以看到，橙色滑塊就是向右偏移了兩個(gè)tab的距離

如果從第一個(gè)tab到第六個(gè)tab的索引是0,1,2,3,4,5。

那么滑塊的公式就是（索引*tab的寬度）。大家看到有逐漸過(guò)去的效果，其實(shí)是css3過(guò)渡（transition）的效果。大家看下面的代碼就行了，一看就懂！代碼如下：

vue方式

  
  





  

    
Tab One
    
Tab Two
    
Tab Three
    
Tab four
    
Tab five
    
Tab six
  
  

javascript方式

  
  





  

    
Tab One
    
Tab Two
    
Tab Three
    
Tab four
    
Tab five
    
Tab six
  
  

4.輪播圖運(yùn)行效果

原理分析

藍(lán)框的是li，黑框的是div

初始化狀態(tài)

處于顯示第二張圖片的時(shí)候

看到上面，其實(shí)也就是控制ul的偏移量（transform:translate3d）。計(jì)算公式和上面的滑塊相似，索引（0|1|2|3）*li的寬度。不同的就是，ul的偏移量是取負(fù)數(shù)，因?yàn)閡l是想左偏，上面的滑塊是向右偏！
當(dāng)?shù)谝粡垐D片的時(shí)候，ul偏移量設(shè)置（transform: translate3d(0px, 0px, 0px)）。
當(dāng)?shù)诙垐D片的時(shí)候，ul偏移量設(shè)置（transform: translate3d(-1000px, 0px, 0px)）。
當(dāng)?shù)诙垐D片的時(shí)候，ul偏移量設(shè)置（transform: translate3d(-2000px, 0px, 0px)）。以此類推，偏移量很簡(jiǎn)單的就能計(jì)算出來(lái)！

可能我說(shuō)的大家有點(diǎn)懵，但是，看下面的代碼，就不會(huì)懵了，因?yàn)榇a也很簡(jiǎn)單！

vue方式

javascript方式

5.小結(jié)

好了，關(guān)于vue+css3開(kāi)發(fā)的特效，以及和javascript+css3的對(duì)比，就說(shuō)到這里了，希望這三個(gè)小實(shí)例，能幫到大家了解下應(yīng)該怎么使用vue+css3開(kāi)發(fā)特效的。今天講這三個(gè)小實(shí)例不是說(shuō)給大家代碼，讓大家復(fù)制粘貼使用，而是希望能起到一個(gè)拋磚引玉的作用，拓展思維的作用！就像我之前寫(xiě)文章說(shuō)得那樣，我寫(xiě)文章是希望能起到一個(gè)授人以漁的作用，而不是授人以魚(yú)！最后，如果大家覺(jué)得有什么地方我寫(xiě)錯(cuò)了，寫(xiě)錯(cuò)不好，或者有其它什么建議，歡迎指出！讓大家相互學(xué)習(xí)，共同進(jìn)步！也希望大家多多支持創(chuàng)新互聯(lián)?。?！