溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue動畫封裝的具體代碼，供大家參考，具體內容如下
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition:opacity 1s;
}
</style>
<div id='app'>
<transition>
<div v-if='show'>hello world</div>
</transition>
<button @click='handleClick'>切換</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
有時候這種漸隱漸現的效果用的比較多，要復用，需要封裝一下，怎么封裝呢
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition:opacity 1s;
}
</style>
<div id='app'>
<fade :show='show'>
<div>hello world</div>
</fade>
<fade :show='show'>
<h2>hello world</h2>
</fade>
<button @click='handleClick'>切換</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template: `
<transition>
<slot v-if='show'></slot>
</transition>
`
})
var vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
可以這樣封裝，將dom元素傳入slot，除了這樣，還可以樣式一起封裝進去
<div id='app'>
<fade :show='show'>
<div>hello world</div>
</fade>
<fade :show='show'>
<h2>hello world</h2>
</fade>
<button @click='handleClick'>切換</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template: `
<transition @before-enter='handleBeforeEnter' @enter='handleEnter'>
<slot v-if='show'></slot>
</transition>
`,
methods:{
handleBeforeEnter:function(el){
el.style.color='red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color='green';
done();
},2000)
}
}
})
var vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
把樣式一起封裝進來，是比較推薦的方式。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
