從頭開始複習css之動畫

時間 2019-11-07

原文原文鏈接

說到動畫，其實不少人心中都會有一種抵觸的情緒老是認爲動畫並非項目內須要的。而且動畫也不必定是項目內必須的東西，因此不少人並非很在乎這個玩意兒。可是我想說的是：區別一我的的價值並非在完成項目的能力，而是將項目優化的程度。而動畫正式如此，他並非你的必須品可是能讓你的能力更上一個臺階。javascript

1、什麼是動畫？

說到動畫，在不少的眼裏都會認爲動畫是一個無關緊要的東西。由於在不少程序員的平常開發中，動畫基本都是沒有被用到的。咱們這裏來談到動畫會不會有點多餘呢？css

正如我前面說到，動畫並非項目中的必需品，但倒是項目的潤滑劑。由於它能很大程度上能加強用戶的體驗。說了這麼多，究竟動畫是什麼呢？html

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。而且動畫可以改變任意多的樣式任意多的次數。前端

怎麼理解這句話呢？就直接從動畫的屬性開始提及吧。vue

2、談一談動畫的基礎屬性

前面一個小節，簡單介紹了一下動畫到底是什麼。這章我就用動畫的api來說講解一下動畫的定義。首先來看下面一段代碼：java

// css
@keyframes move {
  from {
    top:0px;
  }
  to{
    top: 20px
  }
}
.test {
  width: 10px;
  height: 10px;
  background-color: red;
  animation-name: move;
  animation-duration: 3s;
  position:relative;
}
// html
<div class="test"></div>
複製代碼

效果以下： git

從上面的效果圖咱們能夠發現：本來靜止的組件運動了起來。首先咱們來談一談其中用到動畫的屬性值：程序員

@keyframes關鍵幀關鍵幀的做用是用來建立動畫的。而動畫的原理就是將一套css樣式逐漸變化成另外一套樣式。他能夠接收另種類型的參數：from/to和百分數，其語法爲：

@keyframes animationname {keyframes-selector {css-styles;}}
複製代碼

animation-name
animation-duration

再一看下面的兩個屬性：animation-name和animation-duration。其含義分別表明動畫的名稱和一組動畫完成的時間。從這兩個命名的規則是否是讓咱們想起了以前講過的過渡呢？github

我想說是的：不只這兩個屬性的含義和過渡中的兩個屬性相似，而且還包含過渡中的另外兩個屬性：ajax

animation-timing-function：動畫的速度曲線。默認是 "ease"
animation-delay:動畫執行的延時時間

以上這四個屬性的含義和使用的方法和前面一篇文章的過渡用法相似，這裏我就很少加贅述了。那麼既然這裏都說了，動畫的效果和過渡差很少那麼咱們爲何還要花費心思來創造出動畫呢？來仔細看我細細爲您講解出來吧，首先來看下面一段代碼：

@keyframes move {
  0% {
    top:0px;
  }
  25%{
    top: 20px
  }
  50% {
    top: 40px
  }
  75% {
    top: 20px
  }
  100% {
    top:0;
  }
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;		
}
.test:hover{
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position:relative;
}
複製代碼

效果以下：

從上面的代碼咱們就能夠發現，動畫與過渡的第一個區別：過渡只能表明一個狀態到另外一個狀態的過程，並不能重複，而動畫中增長了 animation-iteration-count是來控制動畫執行的次數，該參數可接收的是一個整數，infinite表明無限次。

再來看一段代碼：

@keyframes move {
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:40px; top:0px;}
  50%  {background:blue; left:40px; top:40px;}
  75%  {background:green; left:0px; top:40px;}
  100% {background:red; left:0px; top:0px;}
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;
			
}
.test:hover {
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction:alternate;
  position:relative;
}
複製代碼

效果以下：

從上面的效果咱們能夠清楚的發現：animation-direction能夠用來定義奇數次是否應該輪流反向播放動畫。

咱們再來看一個代碼：

@keyframes move {
			0%   {left:0px;}
			100%  {left:60px;}
		}
		.runner {
			width: 20px;
			height: 20px;
			animation-name: move;
			animation-iteration-count: 1;
			animation-timing-function: linear;
			position: absolute;
			
		}
		.user1 {
			background: red;
			animation-duration: 1s;
		}
		.user2 {
			background:black;
			animation-duration: 1s;
			animation-fill-mode: forwards;
			top:30px;
		}
		.user3 {
			background:red;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			top:60px;
		}
		.playground {
			position: relative;
			height: 90px;
		}
		.stop {
			animation-play-state:paused;
		}

	<div class="playground">
		<div class=" runner user1"></div>
		<div class=" runner user2"></div>
		<div id=user3 class=" runner user3"></div>
	</div>
	<button id="test_btn" onclick="myBtnClick()">暫停</button>

	<script type="text/javascript">
		function myBtnClick(){
			document.getElementById("user3").classList.add("stop")
		}

	</script>
複製代碼

效果以下：

從上面的現象能夠發現：animation-fill-mode能夠更改動畫完成時的位置，而animation-play-state能中止動畫，下面咱們來用書面語言描述一下：

animation-play-state：表示動畫是否正在運行或者是暫停。主要用途用於js中來中止動畫，這個用的很少不知道如何舉例
animation-fill-mode：表示對象動畫時間以外的狀態。

這裏值得說明的是：animation-fill-mode有四個可選值：一、 none 不改變默認行爲。二、 forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。三、 backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。四、 both 向前和向後填充模式都被應用。

3、怎麼來學習動畫呢？

前面一節基本都將動畫的效果都簡單的闡述了一遍，可是對於那種初學者來講，在學習的時候基本一學就懂，可是應用的時候就不怎麼會，難如下手。針對這種問題，做爲程序員第件事兒就是應該想到的就是：從模仿中學習。

怎麼理解從模仿中學習呢？在剛開始學習某項技術的時候，咱們應該去讀一下同類技術比較成熟的寫法。從模仿到使用，再進行改裝。

在這裏，我就給你們介紹一個比較好的庫：animate.css。爲何介紹這個庫呢？由於它裏面就涵蓋了大多數的動畫效果，而且源碼也是能夠下載的。咱們能夠經過使用它的效果來熟悉動畫，學習動畫等等。

該如何來使用他呢？來看下面一段代碼，說一下它的常規使用方法：

// 引入animate.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

.test {
  width: 100px;
  height: 100px;
  background: red;
  margin: 100px;
}
.test:hover {
  animation: wobble 1s;
}
	<div class="test" ></div>
複製代碼

效果以下：

這裏值得注意的兩點：

animate是前面全部api的總和，咱們能夠用簡寫，具體的api有：

animation: name duration timing-function delay iteration-count direction fill-mode;
複製代碼

wobble是animate裏面寫好的動畫效果，咱們在使用的時候能夠直接進行引入具體的效果咱們能夠去官網裏面查詢更多。

我這裏呢？就簡單的介紹了animate.css中的一個動畫效果，具體的還有更多，官網也有效果有興趣的能夠學習一下。

4、簡單的介紹一下vue中如何使用動畫

前面談到了動畫的普通用法，那麼做爲一個vue框架的使用者，就不得不提到動畫在vue中的應用了。首先咱們在介紹使用動畫的使用以前，咱們首先介紹一個vue中特有的標籤transition，該標籤能夠給

條件渲染 (使用 v-if)
條件展現 (使用 v-show)
動態組件
組件根節點

任意一種狀況添加過渡/動畫效果。來看下面一段代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>動畫</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
	<style type="text/css">
		.area{
			width: 100px;
			height: 100px;
		}
		.red {
			background: red;
		}
		.yellow{
			background-color: yellow;
		}
		.fade-enter-active, .fade-leave-active {
			transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to {
			opacity: 0;
		}
	
	</style>
</head>
<body>
	<div id="app" >
		<button @click="isSelect=!isSelect">{{isSelect?'紅色':'黃色'}}</button>
		<transition-group name="fade">
			<div class="area red" v-if="isSelect" key="red"></div>
			<div class="area yellow" key="yellow" v-else></div>
		</transition-group>

	</div>

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				isSelect:false
			},
			methods:{
			}
		})
	</script>


</body>
</html>
複製代碼

效果爲：

從上面的效果=能夠發現，transition能夠給包裹的組件增長動畫效果，下面就針對上面的效果，咱們介紹一下vue關於動畫效果/過渡效果的幾個屬性。

transition/transition-group

transition的含義是：當存在transition 組件內的節點被插入或刪除的時候，vue會作以下處理：

自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名。
若是過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做 (插入/刪除) 在下一幀中當即執行。
transition只能包裹單個組件，transition-group能包裹多個組件。

動畫過渡的類名

在過渡動畫中，存在下面六個屬性值

一、 v-enter：定義進入過渡的開始狀態。在元素被插入以前生效，在元素被插入以後的下一幀移除。二、 v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義進入過渡的過程時間，延遲和曲線函數。三、 v-enter-to: 2.1.8版及以上定義進入過渡的結束狀態。在元素被插入以後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成以後移除。四、 v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時馬上生效，下一幀被移除。五、 v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時馬上生效，在過渡/動畫完成以後移除。這個類能夠被用來定義離開過渡的過程時間，延遲和曲線函數。六、 v-leave-to: 定義離開過渡的結束狀態。在離開過渡被觸發以後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成以後移除。這裏值得咱們注意的點是，若是在transition中沒有設置name的時候，默認是v-開頭，若是設置了name 正如前面fade同樣，其中的類名就會演變成fade-開頭。

前面既然說了這麼多vue中使用動畫的基礎（咱們這裏主要是來複習動畫的，vue的知識就不過多的來複習了），那麼咱們如何在vue去使用animate.css呢？來看下面一段代碼：

<div id="app" >
  <button @click="isSelect=!isSelect">點擊</button>
  <transition enter-active-class="animated bounceIn"
        leave-active-class="animated rotateOut">
	<div class="area red" v-if="isSelect"></div>
  </transition>

</div>
複製代碼

效果以下：

從上面的代碼裏面咱們能夠發現，咱們已經爲組件增長上了animate.css的動畫效果，這裏如何辦到的呢？首先咱們再來介紹一下vue的自定義類：一、 enter-class 二、 enter-active-class 三、 enter-to-class 四、 leave-class 五、 leave-active-class 六、 leave-to-class 分別對應前面過渡動畫的六個屬性值，來自定義咱們想要的效果和動畫。這裏值得注意的是：咱們在使用animate.css的類名的時候，通常都要前面加上animated類才能生效。

寫在最後

動畫實際上是很是重要的，他能給用戶一種很是溫馨的體驗，能夠很大程度上面增長用戶的體驗，因此我建議仍是要多在項目中適當的增長動畫。另外，我在最後給你們提到了animate.css--一個很優秀的動畫庫。我提到這個庫不是想說讓大家找到了一個比較好偷懶的辦法，而是想讓你能從使用中淬鍊技術，學習他的用法、兼容語法，從而將動畫達到融會貫通的地步。

最近一直在從頭開始複習前端、Android這兩塊知識點。忽然感受要複習的點真的有好多，而後本身仍是好菜呀！