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動畫庫，它預設了抖動（shake）炕吸、閃爍（flash）伐憾、彈跳（bounce）、翻轉（flip）赫模、旋轉（rotateIn/rotateOut）树肃、淡入淡出（fadeIn/fadeOut）等多達70多種動畫特效，幾乎包含了所有常見的動畫特效瀑罗。
- 重點：瀏覽器兼容胸嘴，animate.css底層是通過css3實現的，當然是只兼容支持CSS3 animate屬性的瀏覽器： IE10+斩祭、Firefox劣像、Chrome、Opera摧玫、Safari耳奕。
- 官方演示：https://daneden.github.io/animate.css/
- 案例演示：登錄界面特效
Animate.css的具體使用
引入文件
<link rel="stylesheet" href="animate.min.css">
- 給要做動畫的HTML標簽添加上相對應的類，比如：
<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配合，只需要短短幾行代碼就可以實現很多特效溃论。
- 容易定制屎蜓，我們可以改變動畫去設置喜歡的風格、延遲钥勋、長度炬转、偏移和迭代等等。
-
兼容性考慮
- 因為算灸，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: 動畫重復次數
- 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
- 用于決定當前的元素在滾動的時候到達怎樣的位置出現（是在滾動之前出現、滾動之后出現磁携，還是滾動的時候出現）褒侧，比如：http://www.520it.com/special/html5
Snip20170204_7.png WOW的默認配置參數
var wow = new WOW({
boxClass: 'wow', // 動畫元素的CSS類（默認類名wow）
animateClass:'animated', // 動畫CSS類 （默認類名animated）
offset: 0, // 距離可視區(qū)域多少開始執(zhí)行動畫（默認為0）
mobile: true, // 是否在移動設備上執(zhí)行動畫 （默認是true）
});
wow.init();
- WOW.js存在怎樣的問題？
- WOW.js實例的動畫只能加載一次谊迄，如果要重新執(zhí)行動畫必須要進行刷新闷供。
- 但是在實際開發(fā)中，更多時候動畫是只加載一次统诺，否則會造成視覺錯亂歪脏。那如果要多次重復展現動畫該如何處理呢？
三粮呢、scrollReveal
Snip20170204_8.png
scrollReveal是一個兼容PC端和移動設備的滾動動畫庫婿失。不同的是 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
-
-
使用方法：
- 引入文件：
<script src="js/scrollReveal.js"></script>- html:
<div class="box"></div>- JavaScript:
window.onload = function () { window.sr = ScrollReveal(); sr.reveal('.box'); } 常用參數：
var config = {
reset: false, // 滾動鼠標時秧骑，動畫開關
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'...
// 回調函數
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, // 滾動鼠標時，動畫開關
origin: 'bottom', // 動畫開始的方向
duration: 500, // 動畫持續(xù)時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9 //縮放
};
var config2 = {
reset: true, // 滾動鼠標時乎折，動畫開關
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的釋放動畫，只能夠實現一次坟冲，而ScrollReveal可以無限次使用磨镶；
- ScrollReveal 參數相對比較多，比較復雜些健提；
- 實際工作中琳猫，用wow比較多。
五私痹、LESS
Snip20170204_10.png
- 什么是LESS?
Less 是一門 CSS 預處理語言脐嫂，使用了類似CSS的語法，為CSS賦予了動態(tài)語言的特征紊遵。它擴展了 CSS 語言账千，增加了變量、Mixin(混合)暗膜、嵌套匀奏、函數和運算等特性，使 CSS 更易維護和擴展桦山。此外攒射，Less 可以運行在 Node 或瀏覽器端醋旦。
一句話：用類似JS的語法去寫CSS
-
LESS的特點：
- 作為CSS的一種擴展，LESS CSS不僅向下兼容CSS的語法会放，而且連新增的特性也是使用CSS語法饲齐。這樣的設置使得學習LESS非常輕松，而且你可以在任何時候回退到CSS咧最。
-
變量：單獨定義一系列通用的樣式捂人，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了
// JS中定義變量 var name = '張三'; // LESS中定義變量 @color:red; h1{ color: @color; } -
嵌套
- 在一個選擇器中嵌套另一個選擇器來實現繼承矢沿，這樣很大程度上減少了代碼量滥搭，并且代碼看起來更加清晰。
div{ h1{ color:red; } }注意：嵌套一般情況下捣鲸，不要超過3層
-
運算
- 運算提供了加瑟匆、減、乘栽惶、除操作愁溜，其他復雜的運算交給函數；通常我們可以做屬性值和顏色的運算外厂，這樣就可以實現屬性值之間的復雜關系冕象。
注意：運算符與值之間必須以空格分開。
@w:500px; div{ h1{ width: @w - 100; } } h1{ width: @w; border: 1px solid #000; } -
混合(Mixins)
- 混合可以將一個定義好的class A輕松的引入到class B中汁蝶，從而簡單的實現class B 繼承class A的所有屬性渐扮。我們還可以帶參數的調用，就像使用函數一樣掖棉。
圖片 1.png- 注意：混合的使用就和js的自定義函數類似墓律，首先 混合 必須前面是以 . +混合名稱開始
- 結構：.名稱(變量){}
- 可以有默認值，也可以沒有默認值幔亥，沒有的話只锻，在調用的時候必須傳參，有默認值的時候就可以不用傳遞參數紫谷；
- 多個參數之間和js一樣，用逗號（,） 隔開
-
函數
LESS中的函數 - 映射了JavaScript函數代碼捐寥，如果你愿意的話笤昨，可以操縱屬性值。
-
比如：鼠標移上亮度增加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%); // 設定透明度為 50% spin(@color, 10); // 色相值增加 10 …… -
匹配模式
- 類似js中的if else判斷，只有匹配成功才能起作用
圖片 3.png注意：匹配模式中,定義的模式名稱都是一樣的乡洼，只是參數不一樣崇裁，調用的時候只需選擇對應的參數就可以了匕坯。
-
如何使用LESS?
- 方式一：客戶端直接調用
<link rel="stylesheet/less" href="less/less.less"> <!--用于編譯LESS的--> <script type="text/javascript" src="js/less.min.js"></script>注意：必須在服務器環(huán)境中才能生效，動態(tài)編譯注入虛擬DOM或者內存中拔稳，類似ajax葛峻。
開發(fā)中常用的服務器組合：WAPM-
方式二：預編譯（提前編譯）
- 在代碼編輯器中，按照LESS的語法規(guī)則寫好LESS文件巴比；
- 使用編譯工具把.less文件編譯成.css文件术奖；
- 把編譯后的css文件引入到頁面即可。
編譯工具：Koala
Snip20170205_11.png
- 如何在一個LESS文件中導入另一個LESS文件轻绞？
@import "less.less"; // 注意：less文件擴展名可選
- 其他補充
- // 不會被編譯器編譯的注釋
- /**/ 是可以被編譯器編譯的 注釋
- ~’’ 表示的是禁止被編譯
- & 表示選擇所有的父級元素
- 《授之于漁》
- LESS官網：http://lesscss.org/
- LESS中文網 ：
http://www.lesscss.cn/
http://www.lesscss.net/
