也許vue+css3做交互特效更簡單

geekzhou 發(fā)布于2019-08-21 17:42 / 1295人閱讀

摘要：前言做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用，開發(fā)技術(shù)棧方面，理所當然就使用了開發(fā)，過程中發(fā)現(xiàn)使用開發(fā)特效，和的思維方式不一樣，但是比簡單一點點。

1.前言

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

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

2.開場小動畫 運行效果

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

原理分析

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

下面簡單分析下，這個動畫的幾個步驟，從下面看到，這個動畫一共8個步驟。

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

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

vue方式




    
    Title




    {{testText}}

javascript方式




    
    Title




    歡迎瀏覽

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

原理分析

首先，下面是頁面初始化的時候，橙色滑塊的位置

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

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

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

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

vue方式




    
    Title





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

javascript方式




    
    Title





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

4.輪播圖 運行效果

原理分析

藍框的是li，黑框的是div

初始化狀態(tài)

處于顯示第二張圖片的時候

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

可能我說的大家有點懵，但是，看下面的代碼，就不會懵了，因為代碼也很簡單！

vue方式




    
    Title

javascript方式




    
    Title

5.小結(jié)

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

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣