Vue中添加過渡效果的方法
更新時間：2017年03月16日 10:21:31 作者：HNS
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果，有興趣的同學可以了解一下。
關于vue的過渡效果，vue官方給的概述是這樣的。
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。
包括以下工具：
1、在 CSS 過渡和動畫中自動應用 class
2、可以配合使用第三方 CSS 動畫庫，如 Animate.css
3、在過渡鉤子函數中使用 JavaScript 直接操作 DOM
4、可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
其中里面也給出了許多的例子，但是例子給到了“多個元素過渡”的時候，就沒有案例的代碼了，在這里對vue官方文檔的這部分案例做一部分補充。
以下我的代碼
<!DOCTYPE html>
<html>
<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">
<script src="../js/vue.js" charset="utf-8"></script>
<title>過渡效果-多個元素的過渡</title>
<style>
/*淡入淡出按鈕,這個使得按鈕的效果很差*/
/*在 “on” 按鈕和 “off” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是 <transition> 的默認行為 - 進入和離開同時發(fā)生。*/
.fade-enter-active,.fade-leave-active{
transition: all .5s
}
.fade-enter,.fade-leave-active{
opacity: 0
}
/*淡入淡出+絕對定位*/
#app2{
position: relative;
height: 100px;
width: 100px;
background:green;
}
#app2 button{
position: absolute;
left:50%;
top: 50%;
}
.fade-abosolute-enter,.fade-abosolute-leave-active{
opacity: 0
}
.fade-abosolute-enter-active,.fade-abosolute-leave-active{
transition: all 1s
}
/*淡入淡出+絕對定位+滑動效果*/
/*這三種效果合在一起，產生的效果是比較好的*/
#app3{
width: 200px;
height: 100px;
background: rgb(26, 46, 224);
position: relative;
}
#app3 button{
position: absolute;
left: 50%;
top: 50%;
}
.fade-slide-enter-active,.fade-slide-leave-active{
transition: all 1s
}
.fade-slide-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-leave-active{
opacity: 0;
transform: translateX(-30px);
}
#app4{
position: relative;
width: 200px;
height: 100px;
background: rgb(8, 201, 80);
}
#app4 button{
position: absolute;
left: 50%;
top: 50%;
}
.fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
transition: all .5s
}
.fade-slide-mode-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-mode-leave-active{
opacity: 0;
transform: translateX(-30px);
}
</style>
</head>
<body>
<!-- 淡入淡出按鈕,這個使得按鈕的效果很差 -->
<div id="app1">
<!-- 這個淡出淡出效果，在原本沒加上過渡模式的時候效果非常糟糕，在加入了mode="out-in"之后，效果比較好，out-in指的是先過渡現有的元素，在過渡新元素 -->
<transition name="fade" mode="out-in">
<button v-if="isEditing" key="save" @click="isEditing = !isEditing">
save
</button>
<button v-else key="edit" @click="isEditing = !isEditing">
Edit
</button>
</transition>
</div>
<!-- 淡入淡出+絕對定位 -->
<div id="app2">
<transition name="fade-abosolute">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
<!-- 淡入淡出+絕對定位+滑動 -->
<div id="app3">
<transition name="fade-slide">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
<!-- in-out,out-in的過渡模式，同時生效的進入和離開的過渡不能滿足所有要求，所以vue提供了過渡模式 -->
<div id="app4">
<transition name="fade-slide-mode" mode="in-out">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el:'#app1',
data () {
return{
isEditing:true,
}
}
})
var vm2 = new Vue({
el:'#app2',
data () {
return {
on:true
}
}
})
var vm3 = new Vue({
el:'#app3',
data () {
return {
on:true
}
}
})
var vm4 = new Vue({
el:'#app4',
data () {
return {
on:true
}
}
})
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vite項目如何集成eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vue watch響應數據實現方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue3選項式api如何監(jiān)控數組變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
分布式搜索和全文搜索在現代應用程序中變得越來越重要,因為它們可以幫助用戶快速查找和檢索大量數據,Elasticsearch是一種強大的分布式搜索引擎,本文將介紹如何在Vue.js應用程序中實現分布式搜索和全文搜索,以及如何與Elasticsearch集成,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了vue+antd實現折疊與展開組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vue3?源碼解讀之?Teleport?組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue watch關于對象內的屬性監(jiān)聽的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
本文主要介紹了Vue組件文檔生成工具庫的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08