vue中組件的過渡動畫及實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:03:35

vue中組件的過渡動畫及實現代碼

vue中組件的過渡動畫及實現代碼:1. 和多個元素的過渡一樣，用組件來替換transition中包裹的標簽 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </st

推薦度：

點擊下載本文 文檔為doc格式

導讀vue中組件的過渡動畫及實現代碼:1. 和多個元素的過渡一樣，用組件來替換transition中包裹的標簽 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </st

1. 和多個元素的過渡一樣，用組件來替換transition中包裹的標簽

<style>
 .fade-enter,
 .fade-leave-to {
 opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
 transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="show = !show">click me</button>
 <transition name="fade" mode="in-out">
 <child-one v-if="show"></child-one>
 <child-two v-else></child-two>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
 template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
 template: `<div>child-two</div>`
 })
 new Vue({
 el: '#demo',
 data: {
 show: true
 },
 })
 </script>

2. 動態組件：component組件 :is 屬性，來實現組件的過渡效果

<style>
 .fade-enter,
 .fade-leave-to {
 opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
 transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="handleClick">click me</button>
 <transition name="fade" mode="in-out">
 <component :is="type"></component>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
 template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
 template: `<div>child-two</div>`
 })
 new Vue({
 el: '#demo',
 data: {
 type: 'child-one'
 },
 methods:{
 handleClick () {
 this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
 }
 }
 })
 </script>

PS：下面看下Vue過渡動畫實現

實現一個點擊切換元素的隱藏和顯示狀態!

<div id="app">
 <transition>
 <p v-if="show">Hello World</p>
 </transition>
 <button @click="toggle">切換</button>
</div>

需要把加入動畫的元素放在transition組件內,定義一個按鈕的切換方法

<script>
 var app=new Vue({
 el:"#app",
 data:{
 show:true
 },
 methods:{
 toggle:function(){
 this.show=!this.show;
 }
 }

 })
</script>

給不同狀態下添加相應的樣式

.v-enter,.v-leave-to{
 opacity:0;
}
.v-enter-active,.v-leave-to{
 color:#00BFFF;
 transition: opacity 3s;
}

可以給transition添加一個name,如果name為"fade",則class前綴為指定的name

動畫過程中類名的變化

我們可以自定義類名,在元素屬性中添加進入狀態 enter-active-class,和離開狀態leave-active-class

總結

以上所述是小編給大家介紹的vue中組件的過渡動畫及實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue中組件的過渡動畫及實現代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 動畫實現

熱門焦點

vue中組件的過渡動畫及實現代碼

vue中組件的過渡動畫及實現代碼

vue中組件的過渡動畫及實現代碼

最新推薦

猜你喜歡

熱門推薦