整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
?在我們顯示的頁面中動畫對于我們來說雖然不是必須的，但是必要的一些動畫效果能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能。所以本文就來給大伙介紹下動畫的基礎(chǔ)內(nèi)容。
??我們先來實現(xiàn)一個不帶動畫效果的顯示和隱藏的功能。
案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<h3 v-if="flag">這是一個h3</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
效果雖然實現(xiàn)了，但是效果并不是太好。
??Vue 在插入、更新或者移除 DOM 時,我們可以在 CSS 過渡和動畫中自動應(yīng)用 class，
在這里插入圖片描述
過渡類 | 說明 |
v-enter | 這是一個時間點,是進入之前， |
v-enter-active | 入場動畫的時間段 |
v-enter-to | 入場結(jié)束的時間點 |
v-leave | 離場動畫開始的時間點 |
v-leave-active | 離場動畫的時間段 |
v-leave-to | 這是一個時間點,是動畫離開之后， |
1.要使用過渡動畫效果的元素 必須被 transition標簽包裹
在這里插入圖片描述
2.定義對應(yīng)的樣式
在這里插入圖片描述
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
/**opacity 透明度 transform ：https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX( 150px )
}
.v-enter-active,
.v-leave-active {
transition: all 1s ease
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<transition>
<h3 v-if="flag">這是一個h3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
??對于沒有定義的transition名稱的類名默認前綴是 v-,但如果我們想要自定義前綴，那么可以給transition設(shè)置個那么屬性，比如：
在這里插入圖片描述
在這里插入圖片描述
效果還是一樣的。
??通過案例中我們需要自定動畫效果，這個會顯得有點麻煩，這時我們可以使用別人已經(jīng)定義的動畫效果，比如Animate.css來實現(xiàn)，https://daneden.github.io/animate.css/ 官網(wǎng)效果
在這里插入圖片描述
是不是提供的效果蠻多的呀，我們就來看看具體怎么用吧。
在這里插入圖片描述
可以自行在官網(wǎng)下載 在transition中添加對應(yīng)的樣式
在這里插入圖片描述
https://github.com/daneden/animate.css 具體的樣式類可以在此頁面選擇
在這里插入圖片描述
注意：duration="毫秒值" 來統(tǒng)一設(shè)置 入場 和 離場 時候的動畫時長
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/animate.css">
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
演示效果不是太理想，工具原因，感興趣的小伙伴可自行運行哦。
?上篇文章我們介紹了過渡動畫的實現(xiàn)，包括完整的 入場 和 離場 動畫，但是在實際過程中我們有時可能僅僅需要使用半場動畫，比如淘寶購物車的下單處理等。
在這里插入圖片描述
?前面給大家介紹了動畫的基本使用，本文我們來實現(xiàn)一個動畫的簡單案例，效果如下
在這里插入圖片描述
??最基礎(chǔ)的頁面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
??添加一個基本的列表數(shù)據(jù)，此處使用到 v-for 指令來循環(huán)取數(shù)據(jù)
在這里插入圖片描述
效果:
在這里插入圖片描述
??給 li 標簽設(shè)置對應(yīng)的樣式。
<style>
li{
border: 1px dashed red;
margin-top: 5px;
line-height: 40px;
padding-left: 10px;
}
</style>
效果
在這里插入圖片描述
??給列表數(shù)據(jù)添加一個鼠標滑過的 hover 動畫效果
<style>
li{
border: 1px dashed red;
margin-top: 5px;
line-height: 40px;
padding-left: 10px;
}
/*鼠標滑過的動畫*/
li:hover{
background-color: aquamarine;
transition: all 0.8s ease;
}
</style>
效果
在這里插入圖片描述
??增加一個給列表添加數(shù)據(jù)功能，之前已經(jīng)實現(xiàn)過了，代碼如下
在這里插入圖片描述
在這里插入圖片描述
效果
在這里插入圖片描述
??上面的效果功能是實現(xiàn)了，但是效果比較生硬，我們可以加上動畫效果，要使用動畫之前我們使用的是 transition 標簽，但是現(xiàn)在是在 v-for 中循環(huán)遍歷的多個 li 標簽中 我們需要使用 transition-group 標簽來包裹.
在這里插入圖片描述
動畫代碼
在這里插入圖片描述
效果
在這里插入圖片描述
有了一個列滑動入場的效果~
??當我們點擊某行數(shù)據(jù)的時候?qū)⑦@行移除掉，先給 li 綁定一個點擊事件，然后del方法中移除當前行
在這里插入圖片描述
效果
在這里插入圖片描述
如上，移除有些停頓，不是太好，我們可以加如下兩個動畫來實現(xiàn)。
在這里插入圖片描述
效果
在這里插入圖片描述
移除一個列的時候，下面的列有往上飄的效果~
??我們在刷新頁面，第一次進來的時候，列表沒有入場動畫，這時我們可以添加一個 appear屬性來設(shè)置
在這里插入圖片描述
最后 transition-group中還有一個 tag屬性，用來設(shè)置包裹的標簽，先來看沒有tag的效果
在這里插入圖片描述
我們使用tag屬性來試試
在這里插入圖片描述
在這里插入圖片描述
這樣就沒有 span 中間的 標簽了。
最后完成的代碼如下:
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
