HTML5常用框架
前言
隨著HTML5規(guī)范的不斷完善，圍繞著這一生態(tài)有很多實用的框架，極大的提高了我們的開發(fā)效率，常見的框架代表有：UI層面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS層面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，還有很多常用的動畫庫、字體圖標，比如：Animate、Wow、Iconfont、Iconmoon等。
這些前端框架典型的特點：簡單易用、相通性強，我們可以在學習一個框架后快速上手其他框架。
一、 Animate.css
圖1
-
Animate.css是一個css動畫樣式庫，其目標是讓CSS動畫像喝水一樣容易
（Just-add-water CSS Animation）。- animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨瀏覽器的動畫特效的綜合動畫庫)
- animate.css是一個來自國外的CSS3動畫庫，它預設(shè)了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達70多種動畫特效，幾乎包含了所有常見的動畫特效。
- 重點：瀏覽器兼容，animate.css底層是通過css3實現(xiàn)的，當然是只兼容支持CSS3 animate屬性的瀏覽器： IE10+、Firefox、Chrome、Opera、Safari。
- 官方演示：https://daneden.github.io/animate.css/
- 案例演示：登錄界面特效
Animate.css的具體使用
引入文件
<link rel="stylesheet" href="animate.min.css">
- 給要做動畫的HTML標簽添加上相對應(yīng)的類，比如：
<div class="box myAnimated flip"></div>
- 注意：類
animated的作用是控制動畫的持續(xù)時間，是所有動畫的前提條件， 在其后面的類則為動畫的效果類。
思考？
- 通過Animate.css只給我們省去了一部分效果動畫，其他的還需要用js/jQuery來手寫，能不能夠再化簡一些？
Snip20170204_6.png
-
World of Warcraft可以幫助我們解決這個問題。
二、WOW.js
wow-logo.jpg
-
核心作用：讓頁面滾動更有趣；
- 通過WOW.js，可以在頁面逐漸向下滾動的過程中逐漸釋放這些動畫效果。也就是說：當我們向下滾動頁面時，可以省去很多判斷條件，讓CSS動畫逐漸展示出來。
-
特點
- 輕量級類庫， 不依賴jQuery，超簡單的安裝和使用，與animate.css配合，只需要短短幾行代碼就可以實現(xiàn)很多特效。
- 容易定制，我們可以改變動畫去設(shè)置喜歡的風格、延遲、長度、偏移和迭代等等。
-
兼容性考慮
- 因為，WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox、Chrome、Opera、Safari。
如何使用？
引入文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
- 在相對的HTML標簽中通過類進行引用
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
- 在JavaScript中進行初始化
new WOW().init();
案例演練：WOW初體驗
-
WOW.js常用的屬性
- data-wow-delay: 動畫開始前延遲
- data-wow-duration: 動畫持續(xù)時長
- data-wow-iteration: 動畫重復次數(shù)
- data-wow-offset: 距離瀏覽器底部到隱藏框頂部的距離（偏移量）
- 來搞定它？
- 可以加入
data-wow-duration(動畫持續(xù)時間)和data-wow-delay（動畫延遲時間）等屬性。 - 比如
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div>
<div class="wow slideInRight" data-wow-iteration="5"></div>
-
data-wow-offset
- 用于決定當前的元素在滾動的時候到達怎樣的位置出現(xiàn)（是在滾動之前出現(xiàn)、滾動之后出現(xiàn)，還是滾動的時候出現(xiàn)），比如：http://www.520it.com/special/html5
Snip20170204_7.png WOW的默認配置參數(shù)
var wow = new WOW({
boxClass: 'wow', // 動畫元素的CSS類（默認類名wow）
animateClass:'animated', // 動畫CSS類 （默認類名animated）
offset: 0, // 距離可視區(qū)域多少開始執(zhí)行動畫（默認為0）
mobile: true, // 是否在移動設(shè)備上執(zhí)行動畫 （默認是true）
});
wow.init();
- WOW.js存在怎樣的問題？
- WOW.js實例的動畫只能加載一次，如果要重新執(zhí)行動畫必須要進行刷新。
- 但是在實際開發(fā)中，更多時候動畫是只加載一次，否則會造成視覺錯亂。那如果要多次重復展現(xiàn)動畫該如何處理呢？
三、scrollReveal
Snip20170204_8.png
scrollReveal是一個兼容PC端和移動設(shè)備的滾動動畫庫。不同的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次；
-
特點：
- scrollReveal同時兼容PC端和移動端；
- 0依賴（不依賴于jQuery，也不依賴于animate.css）;
- 定制性高，使用簡單方便快捷。
-
瀏覽器兼容：
-
雖然scrollReveal.js不依賴于animate.css，但是它的動畫也是用CSS3創(chuàng)建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，比如： IE10+、Firefox、Chrome、Opera、Safari。
Snip20170204_9.png
-
官網(wǎng)：https://scrollrevealjs.org/
-
使用方法：
- 引入文件：
<script src="js/scrollReveal.js"></script>- html:
<div class="box"></div>- JavaScript:
window.onload = function () { window.sr = ScrollReveal(); sr.reveal('.box'); } 常用參數(shù)：
var config = {
reset: false, // 滾動鼠標時，動畫開關(guān)
origin: 'bottom', // 動畫開始的方向
duration: 500, // 動畫持續(xù)時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9, //縮放
easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 緩動'ease', 'ease-in-out'，'linear'...
// 回調(diào)函數(shù)
beforeReveal: function(domEl){},
beforeReset: function(domEl){},
afterReveal: function(domEl){},
afterReset: function(domEl){}
};
window.sr = ScrollReveal();
sr.reveal('.sr', config);
- 案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.box{
width: 1230px;
margin: 0 auto;
overflow: hidden;
}
ul{
float: left;
width: 300px;
margin-right: 10px;
}
ul:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
</ul>
<ul>
<li class="sr"></li>
<li class="sr man"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
</ul>
<ul>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
</ul>
<ul>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
<li class="sr"></li>
</ul>
</div>
<script src="js/scrollreveal.min.js"></script>
<script>
window.onload = function () {
var config = {
reset: true, // 滾動鼠標時，動畫開關(guān)
origin: 'bottom', // 動畫開始的方向
duration: 500, // 動畫持續(xù)時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9 //縮放
};
var config2 = {
reset: true, // 滾動鼠標時，動畫開關(guān)
origin: 'bottom', // 動畫開始的方向
duration: 1000, // 動畫持續(xù)時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0.5, // 初始透明度
scale: 10 //縮放
};
window.sr = ScrollReveal();
sr.reveal('.sr', config);
sr.reveal('.man', config2);
}
</script>
</body>
</html>
四、scrollReveal 和 WOW的區(qū)別和聯(lián)系
- 它們都不依賴jQuery；
- wow依賴于animate.css ，ScrollReveal不依賴任何其他插件或者庫；
- wow的釋放動畫，只能夠?qū)崿F(xiàn)一次，而ScrollReveal可以無限次使用；
- ScrollReveal 參數(shù)相對比較多，比較復雜些；
- 實際工作中，用wow比較多。
五、LESS
Snip20170204_10.png
- 什么是LESS?
Less 是一門 CSS 預處理語言，使用了類似CSS的語法，為CSS賦予了動態(tài)語言的特征。它擴展了 CSS 語言，增加了變量、Mixin(混合)、嵌套、函數(shù)和運算等特性，使 CSS 更易維護和擴展。此外，Less 可以運行在 Node 或瀏覽器端。
一句話：用類似JS的語法去寫CSS
-
LESS的特點：
- 作為CSS的一種擴展，LESS CSS不僅向下兼容CSS的語法，而且連新增的特性也是使用CSS語法。這樣的設(shè)置使得學習LESS非常輕松，而且你可以在任何時候回退到CSS。
-
變量：單獨定義一系列通用的樣式，然后在需要的時候去調(diào)用。所以在做全局樣式調(diào)整的時候我們可能只需要修改幾行代碼就可以了
// JS中定義變量 var name = '張三'; // LESS中定義變量 @color:red; h1{ color: @color; } -
嵌套
- 在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承，這樣很大程度上減少了代碼量，并且代碼看起來更加清晰。
div{ h1{ color:red; } }注意：嵌套一般情況下，不要超過3層
-
運算
- 運算提供了加、減、乘、除操作，其他復雜的運算交給函數(shù)；通常我們可以做屬性值和顏色的運算，這樣就可以實現(xiàn)屬性值之間的復雜關(guān)系。
注意：運算符與值之間必須以空格分開。
@w:500px; div{ h1{ width: @w - 100; } } h1{ width: @w; border: 1px solid #000; } -
混合(Mixins)
- 混合可以將一個定義好的class A輕松的引入到class B中，從而簡單的實現(xiàn)class B 繼承class A的所有屬性。我們還可以帶參數(shù)的調(diào)用，就像使用函數(shù)一樣。
圖片 1.png- 注意：混合的使用就和js的自定義函數(shù)類似，首先 混合 必須前面是以 . +混合名稱開始
- 結(jié)構(gòu)：.名稱(變量){}
- 可以有默認值，也可以沒有默認值，沒有的話，在調(diào)用的時候必須傳參，有默認值的時候就可以不用傳遞參數(shù)；
- 多個參數(shù)之間和js一樣，用逗號（,） 隔開
-
函數(shù)
LESS中的函數(shù) - 映射了JavaScript函數(shù)代碼，如果你愿意的話，可以操縱屬性值。
-
比如：鼠標移上亮度增加20%。
圖片 2.png 需要查找的時候，直接查文檔就可以了
比如：
saturate(@color, 10%); // 飽和度增加 10% desaturate(@color, 10%); // 飽和度降低 10% lighten(@color, 10%); // 亮度增加 10% darken(@color, 10%); // 亮度降低 10% fadein(@color, 10%); // 透明度增加 10% fadeout(@color, 10%); // 透明度降低 10% fade(@color, 50%); // 設(shè)定透明度為 50% spin(@color, 10); // 色相值增加 10 …… -
匹配模式
- 類似js中的if else判斷，只有匹配成功才能起作用
圖片 3.png注意：匹配模式中,定義的模式名稱都是一樣的，只是參數(shù)不一樣，調(diào)用的時候只需選擇對應(yīng)的參數(shù)就可以了。
-
如何使用LESS?
- 方式一：客戶端直接調(diào)用
<link rel="stylesheet/less" href="less/less.less"> <!--用于編譯LESS的--> <script type="text/javascript" src="js/less.min.js"></script>注意：必須在服務(wù)器環(huán)境中才能生效，動態(tài)編譯注入虛擬DOM或者內(nèi)存中，類似ajax。
開發(fā)中常用的服務(wù)器組合：WAPM-
方式二：預編譯（提前編譯）
- 在代碼編輯器中，按照LESS的語法規(guī)則寫好LESS文件；
- 使用編譯工具把.less文件編譯成.css文件；
- 把編譯后的css文件引入到頁面即可。
編譯工具：Koala
Snip20170205_11.png
- 如何在一個LESS文件中導入另一個LESS文件？
@import "less.less"; // 注意：less文件擴展名可選
- 其他補充
- // 不會被編譯器編譯的注釋
- /**/ 是可以被編譯器編譯的 注釋
- ~’’ 表示的是禁止被編譯
- & 表示選擇所有的父級元素
- 《授之于漁》
- LESS官網(wǎng)：http://lesscss.org/
- LESS中文網(wǎng) ：
http://www.lesscss.cn/
http://www.lesscss.net/
