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

發(fā)布時間：2020-10-24 17:57:24 來源：腳本之家閱讀：173 作者：先去前面探探路欄目：web開發(fā)

1. 和多個元素的過渡一樣，用組件來替換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. 動態(tài)組件：component組件 :is 屬性，來實(shí)現(xiàn)組件的過渡效果

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

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

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

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

<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添加一個name,如果name為"fade",則class前綴為指定的name

動畫過程中類名的變化

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

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

總結(jié)

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽