成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

也許vue+css3做交互特效更簡(jiǎn)單

geekzhou / 1297人閱讀

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

1.前言

做項(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é)得我哪里寫錯(cuò)了，歡迎指出！

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

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

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

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

vue方式 



    
    Title





    
{{testText}}
javascript方式 



    
    Title





    
歡迎瀏覽
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方式 



    
    Title
javascript方式 



    
    Title
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方式 



    
    Title
javascript方式 



    
    Title
    
    




    
    
    
        
        
    • 
        
    • 
        
    • 
        
    •
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è)拋磚引玉的作用，拓展思維的作用！就像我之前寫文章說(shuō)得那樣，我寫文章是希望能起到一個(gè)授人以漁的作用，而不是授人以魚！最后，如果大家覺(jué)得有什么地方我寫錯(cuò)了，寫錯(cuò)不好，或者有其它什么建議，歡迎指出！讓大家相互學(xué)習(xí)，共同進(jìn)步！

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89897.html

相關(guān)文章

  • 也許vue+css3做交互特效更簡(jiǎn)單

    摘要：前言做項(xiàng)目就難免會(huì)開(kāi)發(fā)交互效果或者特效，而我最近開(kāi)發(fā)的項(xiàng)目一直在使用，開(kāi)發(fā)技術(shù)棧方面，理所當(dāng)然就使用了開(kāi)發(fā)，過(guò)程中發(fā)現(xiàn)使用開(kāi)發(fā)特效，和的思維方式不一樣，但是比簡(jiǎn)單一點(diǎn)點(diǎn)。 1.前言 做項(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+c...

    ISherry 評(píng)論0 收藏0

  • 2018年，前端應(yīng)該怎么學(xué)？

    摘要：未來(lái)一個(gè)大的趨勢(shì)就是前端開(kāi)發(fā)的效果，正無(wú)限逼近原生效果同時(shí)一些大廠也在紛紛提前布局了，之前驚艷四方的天貓?jiān)煳锕?jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。我個(gè)人想學(xué)習(xí)的框架是天貓的。 面向2018年，我覺(jué)得前端有這么三個(gè)方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...

    AnthonyHan 評(píng)論0 收藏0

  • css進(jìn)階

    摘要：柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。它表示抓取對(duì)象以后拖放到另一個(gè)位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡(jiǎn)高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會(huì)受到包含塊的限制，可能會(huì)溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由...

    import. 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來(lái)描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^(guò)程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

  • 可能是最全的前端動(dòng)效庫(kù)匯總

    摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫(kù)。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫(kù)之一。可能是創(chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^(guò)安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫(kù)。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫(kù)，是許多基礎(chǔ)動(dòng)...

    afishhhhh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<