vue基礎教程06 動畫效果
阿新 • • 發佈：2020-12-19
1.淡出淡出
複製程式碼就可以實現，解釋全寫在程式碼裡了，我太懶了。。。
開始前我們需要下載個animate.css動畫庫，地址https://animate.style/
懶得下載可以找我要個css檔案。
<style> /* 在動畫的過程中讓他的opacity 3s ,時刻監聽他 一旦他有了變化,就讓他在三秒內慢慢的變 */ .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 3s; } /* v-leave是動畫第一過程他的的opacity預設是1,當v-leave-to給他 opacitey:0;時 下面就監聽到他的變化,讓它在三秒內變化 */ </style> <body> <div id="root"> <!-- 用<transition></transition>標籤對要想動畫的div做一個包裹,不管他用v-if還是v-show來顯示隱藏,都會帶動畫效果 --> <transition> <div v-if="show">盧本偉牛逼!</div> </transition> <button @click="hendClick">切換</button> </div> </body> </html> <script> var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ hendClick:function(){ this.show = !this.show } } }) </script>
2.動畫效果，彈跳+抖動淡出
<style> /* 新增transition過度動畫 */ .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active,.fade-leave-active{ transition: opacity 1s; } </style> <!-- appear重新整理頁面也會顯示動畫 --> <!-- type="transition"表示當animate動畫庫和transition動畫時間時間不一樣的時候,以transition的結束時間為準 --> <!-- :duration="10000"是我們自定義的一個時間來控制動畫的時常,也可以複雜的寫:duration="{enter:5000,leave:10000}",這是入場動畫為5S,出場動畫為10S --> <body> <div id="root"> <transition :duration="10000" name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing" > <div v-if="show">盧本偉牛逼!</div> </transition> <button @click="hendClick">切換</button> </div> </body> </html> <script> var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ hendClick:function(){ this.show = !this.show } } }) </script>
這些引用了velocity.js動畫，上面的是animate.css，，地址http://shouce.jb51.net/velocity/feature.html
找不到可以找我要一下js檔案
3.動畫效果
<script src="./velocity.js"></script> <body> <div id="root"> <!-- 出場和入場的動畫鉤子 --> <transition name="fade" @before-enter="handBeforeEnter" @enter="handeEnter" @after-enter="handAfter" @before-leave="handBeforeEnter" @leave="handeEnter" @after-leave="handAfter" > <div v-if="show">盧本偉牛逼!</div> </transition> <button @click="hendClick">切換</button> </div> </body> </html> <script> //JS動畫鉤子 @before-enter=""有個el引數表示這個div, @enter=""有el和done引數done是結束的回撥函式. //當done回撥函式執行了 VUE會執行一個@after-enter=""鉤子方法 //讓他的顏色在回到之前的黑色 var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ hendClick:function(){ this.show = !this.show }, handBeforeEnter:function(el){ // el.style.color = "red" el.style.opacity = 0; }, handeEnter:function(el,done){ //第一個定時器2秒變藍色,第二定時器在4秒的時候done() // setTimeout(() => { // el.style.color = "blue"; // }, 2000); // setTimeout(() => { // done() // }, 4000); Velocity(el,{ opacity:1 },{ duration:1000, complate:done }) }, handAfter:function(el){ // el.style.color = "#000" console.log('動畫結束') } } }) </script>
4.vue中多個元素和元件的過度
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<body>
<div id="app">
<!-- out-in先隱藏在顯示，in-out反之 -->
<transition mode="out-in">
<!-- <div v-if="show" key="hellow">哈嘍 你好呀</div> -->
<!-- <div v-else key="bey">拜拜</div> -->
<child v-if="show"></child>
<child-two v-else></child-two>
<!-- <component :is="type"></component> -->
</transition>
<button @click="hendClick">點選</button>
</div>
</body>
</html>
<script>
Vue.component('child',{
template:`<div>child one</div>`
})
Vue.component('child-two',{
template:`<div>child two</div>`
})
var vm = new Vue({
el:'#app',
data:{
show:true,
// type:'child'
},
methods:{
hendClick:function (){
this.show = !this.show
// this.type = this.type === 'child'? 'child-two':'child'
}
}
})
</script>
從child one淡入淡出到child two
5.Vue中的列表過度
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<body>
<div id="app">
<!-- <transition-group>相當於在每一個div標籤外都加了一個<transition>, -->
<transition-group>
<div v-for="item of list" key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handClick">點選</button>
</div>
</body>
</html>
<script>
var count = 0;
var vm = new Vue({
el:'#app',
data:{
list:[]
},
methods:{
handClick:function(){
this.list.push({
id:count++,
title:'hello world'
})
}
}
})
</script>
點選後若隱若現的增加一個hello world
6.vue的動畫封裝
封裝一下
<body>
<div id="app">
<fade :show="show">
<div>哈嘍 你好呀</div>
</fade>
<fade :show="show">
<h1>哈嘍 你好呀</h1>
</fade>
<button @click="hendClick">點選</button>
</div>
</body>
</html>
<script>
Vue.component('fade',{
props:['show'],
template:`
<transition @before-enter="handBeforeEnter" @enter="handeEnter">
<slot v-if="show"></slot>
</transition>
`,
methods:{
handBeforeEnter:function(el){
el.style.color = 'red'
},
handeEnter:function(el,done){
setTimeout(()=>{
el.style.color = 'blue'
done()
},2000)
}
}
})
var vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
hendClick:function (){
this.show = !this.show
}
}
})
</script>
可以直接複製程式碼到編譯器裡試一下，看看效果。