資訊專欄INFORMATION COLUMN
摘要：前言做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了開發(fā)，過程中發(fā)現(xiàn)使用開發(fā)特效，和的思維方式不一樣，但是比簡單一點點。
1.前言
做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用vue，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+css3的思維方式不一樣，但是比javascript/jquery+css3簡單一點點。今天就分享三個簡單的小實例，希望能起到拓展思維的作用，讓大家明白vue+css3應(yīng)該怎樣開發(fā)交互效果！如果大家有什么好的建議，或者覺得我哪里寫錯了，歡迎指出！
1.文章上面的代碼，雖然代碼很簡單，不難理解，但是也是建議大家邊寫邊看，這樣不會混亂。2.開場小動畫 運(yùn)行效果
2.文章所提及的小實例，都是很基礎(chǔ)的，大家可以參照自己的想法進(jìn)行擴(kuò)展，或者修改，可能會有意想不到的效果。我寫這類型的文章也是想授人以漁，不是授人以魚！
3.這幾個實例，摘自我自己的平常練習(xí)的項目，代碼已經(jīng)提到github上面了(vue-demos)。歡迎大家star。
gif圖模糊效果看著跟實際效果不太一樣！大家注意！
原理分析說到原理分析，其實也沒什么可以分析的，就是在頁面是下面這個狀態(tài)的時候，把文字替換掉。至于看到字體縮成一團(tuán)，就是letter-spacing這個css屬性的控制效果。字體模糊就是filter: blur()這個css屬性的控制效果！看到有逐漸的變化，就是css3動畫（animation）的效果
下面簡單分析下，這個動畫的幾個步驟，從下面看到，這個動畫一共8個步驟。
這下就清晰明了了，我們要在下圖這個瞬間開始改變文字，也就是頁面加載了兩秒后，動畫執(zhí)行了兩次后就開始改變文字。然后每隔兩秒改變一次文字，直到最后！
下面給出vue和javascript兩種方式的代碼，看下哪種方式更加的簡單！
vue方式
Title
{{testText}}
javascript方式
Title
歡迎瀏覽
3.導(dǎo)航滑塊
運(yùn)行效果
原理分析
首先，下面是頁面初始化的時候，橙色滑塊的位置
鼠標(biāo)放到第二個tab上面，大家可以看到，橙色滑塊就是向右偏移了一個tab的距離
鼠標(biāo)放到第三個tab上面，大家可以看到，橙色滑塊就是向右偏移了兩個tab的距離
如果從第一個tab到第六個tab的索引是0,1,2,3,4,5。
那么滑塊的公式就是（索引*tab的寬度）。大家看到有逐漸過去的效果，其實是css3過渡（transition）的效果。大家看下面的代碼就行了，一看就懂！代碼如下：
vue方式
Title
javascript方式
Title
4.輪播圖
運(yùn)行效果
原理分析
藍(lán)框的是li，黑框的是div
初始化狀態(tài)
處于顯示第二張圖片的時候
看到上面，其實也就是控制ul的偏移量（transform:translate3d）。計算公式和上面的滑塊相似，索引（0|1|2|3）*li的寬度。不同的就是，ul的偏移量是取負(fù)數(shù)，因為ul是想左偏，上面的滑塊是向右偏！
當(dāng)?shù)谝粡垐D片的時候，ul偏移量設(shè)置（transform: translate3d(0px, 0px, 0px)）。
當(dāng)?shù)诙垐D片的時候，ul偏移量設(shè)置（transform: translate3d(-1000px, 0px, 0px)）。
當(dāng)?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í)，共同進(jìn)步！
-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51529.html
摘要：前言做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了開發(fā)，過程中發(fā)現(xiàn)使用開發(fā)特效，和的思維方式不一樣，但是比簡單一點點。 1.前言 做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用vue，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+c...
摘要：未來一個大的趨勢就是前端開發(fā)的效果，正無限逼近原生效果同時一些大廠也在紛紛提前布局了，之前驚艷四方的天貓造物節(jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。我個人想學(xué)習(xí)的框架是天貓的。 面向2018年，我覺得前端有這么三個方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...
摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：非常的龐大，而且它是完全為設(shè)計而生的動效庫。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動畫資源庫之一。可能是創(chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實生活中的物理運(yùn)動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當(dāng)時的該項目在github的star數(shù)量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎(chǔ)庫，是許多基礎(chǔ)動...
閱讀 1980·2021-09-04 16:45
閱讀 771·2019-08-30 15:44
閱讀 908·2019-08-30 13:07
閱讀 469·2019-08-29 16:06
閱讀 1393·2019-08-29 13:43
閱讀 1289·2019-08-26 17:00
閱讀 1538·2019-08-26 13:51
閱讀 2308·2019-08-26 11:48
