前言：
- 隨著HTML5規范的不斷完善，圍繞著這一生態有很多實用的框架，極大的提高了我們的開發效率，常見的框架代表有：UI層面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS層面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，還有很多常用的動畫庫、字體圖標，比如：Animate、Wow、Iconfont、Iconmoon等。
- 這些前端框架典型的特點：簡單易用、相通性強，我們可以在學習一個框架后快速上手其他框架。
一.Animate.css
-
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 animated flip"></div>
- 注意：類animated的作用是控制動畫的持續時間，是所有動畫的前提條件， 在其后面的類則為動畫的效果類。
二、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: 動畫持續時長
- data-wow-iteration: 動畫重復次數
- data-wow-offset: 距離瀏覽器底部到隱藏框頂部的距離（偏移量）
-
來搞定它？
- 可以加入data-wow-duration(動畫持續時間)和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, // 距離可視區域多少開始執行動畫（默認為0）
mobile: true, // 是否在移動設備上執行動畫 （默認是true）
});
wow.init();
- WOW.js存在怎樣的問題？
- WOW.js實例的動畫只能加載一次，如果要重新執行動畫必須要進行刷新。
- 但是在實際開發中，更多時候動畫是只加載一次，否則會造成視覺錯亂。那如果要多次重復展現動畫該如何處理呢？
三、scrollReveal
Snip20170204_8.png
scrollReveal是一個兼容PC端和移動設備的滾動動畫庫。不同的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次；
-
特點：
- scrollReveal同時兼容PC端和移動端；
- 0依賴（不依賴于jQuery，也不依賴于animate.css）;
- 定制性高，使用簡單方便快捷。
-
瀏覽器兼容：
-
雖然scrollReveal.js不依賴于animate.css，但是它的動畫也是用CSS3創建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，比如： IE10+、Firefox、Chrome、Opera、Safari。 Snip20170204_9.png
-
雖然scrollReveal.js不依賴于animate.css，但是它的動畫也是用CSS3創建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，比如： IE10+、Firefox、Chrome、Opera、Safari。
-
使用方法：
- 引入文件：
<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, // 動畫持續時間
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, // 動畫持續時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9 //縮放
};
var config2 = {
reset: true, // 滾動鼠標時，動畫開關
origin: 'bottom', // 動畫開始的方向
duration: 1000, // 動畫持續時間
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的區別和聯系
- 它們都不依賴jQuery；
- wow依賴于animate.css ，ScrollReveal不依賴任何其他插件或者庫；
- wow的釋放動畫，只能夠實現一次，而ScrollReveal可以無限次使用；
- ScrollReveal 參數相對比較多，比較復雜些；
- 實際工作中，用wow比較多。
五、LESS
Snip20170204_10.png
-
什么是LESS?
- Less 是一門 CSS 預處理語言，使用了類似CSS的語法，為CSS賦予了動態語言的特征。它擴展了 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>
注意：必須在服務器環境中才能生效，動態編譯注入虛擬DOM或者內存中，類似ajax。 開發中常用的服務器組合：WAPM
方式二：預編譯（提前編譯）
在代碼編輯器中，按照LESS的語法規則寫好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/
Reference
拷貝于葉老師筆記
