亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue實現多個元素或多個組件之間動畫效果

發布時間:2020-09-25 19:52:07 來源:腳本之家 閱讀:163 作者:鸑鵠 欄目:web開發

本文實例為大家分享了vue實現多個元素或多個組件之間動畫的具體代碼,供大家參考,具體內容如下

多個元素的過渡

<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-acitve,.v-leave-active{
    opacity: opacity 1s;
  }
</style>
<div id='app'>
  <transition>
    <div v-if='show'>hello world</div>
    <div v-else>bye 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>

按照之前的寫法方式,漸隱漸出的效果并沒有出現該有的效果,那么為什么呢?

在if else兩個元素切換的時候,會盡量的復用dom,正是vue,dom的復用,導致動畫的效果不會出現,如果想要vue不去復用dom,之前也說過,怎么做呢,給兩個div不同的key值就行了

<div v-if='show' key='hello'>hello world</div>
<div v-else key='bye'>bye world</div>

這樣就可以有個明顯的動畫效果,多個元素過渡動畫的效果。

transition還提供了一個mode屬性,in-out是先顯示再隱藏,out-in是先隱藏再顯示

多個組件的過渡

<style>
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-acitve, .v-leave-active {
    transition: opacity 1s;
  }
</style>
<div id='app'>
  <transition mode='out-in'>
    <child v-if='show'></child>
    <child-one v-else></child-one>
  </transition>
  <button @click='handleClick'>切換</button>
</div>

<script>
Vue.component('child',{
  template:'<div>child</div>'
})
Vue.component('child-one',{
  template:'<div>child-one</div>'
})
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-acitve, .v-leave-active {
    transition: opacity 1s;
  }
</style>
<div id='app'>
  <transition mode='out-in'>
    <component :is='type'></component>
  </transition>
  <button @click='handleClick'>切換</button>
</div>

<script>
Vue.component('child',{
  template:'<div>child</div>'
})
Vue.component('child-one',{
  template:'<div>child-one</div>'
})
var vm = new Vue({
  el:'#app',
  data:{
    type:'child'
  },
  methods:{
    handleClick:function(){
      this.type = (this.type === 'child' ? 'child-one' : 'child')
    }
  }
})
</script>

這樣也實現了多個組件的過渡效果。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

揭东县| 饶阳县| 黎川县| 东至县| 专栏| 富川| 深州市| 阿图什市| 寿阳县| 叙永县| 庆云县| 福贡县| 郴州市| 乌恰县| 遵化市| 博乐市| 湖口县| 新绛县| 贺兰县| 门头沟区| 景宁| 保定市| 太仓市| 陵川县| 民县| 建水县| 仲巴县| 石嘴山市| 琼海市| 牟定县| 汕头市| 赣榆县| 延庆县| 深水埗区| 洪雅县| 武城县| 樟树市| 泰兴市| 巩留县| 宜兴市| 库伦旗|