快捷導(dǎo)航

vue中組件的過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)代碼

更新時(shí)間：2018年11月21日 11:56:06 作者：先去前面探探路

這篇文章主要介紹了vue中組件的過(guò)渡動(dòng)畫(huà)，并通過(guò)實(shí)例代碼給大家介紹了過(guò)渡動(dòng)畫(huà)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 和多個(gè)元素的過(guò)渡一樣，用組件來(lái)替換transition中包裹的標(biāo)簽

<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. 動(dòng)態(tài)組件：component組件 :is 屬性，來(lái)實(shí)現(xiàn)組件的過(guò)渡效果

<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過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)

實(shí)現(xiàn)一個(gè)點(diǎn)擊切換元素的隱藏和顯示狀態(tài)!

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

需要把加入動(dòng)畫(huà)的元素放在transition組件內(nèi),定義一個(gè)按鈕的切換方法

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

  })
</script>

給不同狀態(tài)下添加相應(yīng)的樣式

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

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

動(dòng)畫(huà)過(guò)程中類(lèi)名的變化

我們可以自定義類(lèi)名,在元素屬性中添加進(jìn)入狀態(tài) enter-active-class,和離開(kāi)狀態(tài)leave-active-class

總結(jié)

以上所述是小編給大家介紹的vue中組件的過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: