Vue中多个元素或组件的过渡

1.因Vue的复用机制，此处动画不会执行，可给元素添加唯一key值来使vue对该元素不进行复用。

2.先进入执行还是先出去执行，可在<transition>元素上设置：mode="in-out"或者mode="out-in"

3.组件的过渡和普通元素的用法一致。

4.动态组件的过渡需在动态组件内绑定is属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
<style>
  .v-enter,v-leave-to{
     opacity：0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity 1s;
  }
  </style>
</head>
<body>
  <div id="root">
    <transition mode="in-out">
<!--      <div v-if="show" key="hello">hello world</div>
     <div v-else key="bye">Bye world</div> -->
     <component :is="type"></component>
     <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:'#root',
      data:{
        type:'child'
      },
      methods:{
        handleClick:function(){
          this.type=this.type==='child'?'child-one':'child'
        },
        handleBeforeEnter:function(el){
          el.style.color="red"

        },
        handleEnter:function(el,done){
          setTimeout(() =>{
            el.style.color='green'
           
          },2000)
          setTimeout(() =>{
            done()
          },4000)
        },
        handleAfterEnter:function(el){
          el.style.color='#000'
        }
      }
    })
   </script>
</body>
</html>
posted @ 2019-12-21 13:31  嘘，在学习呢  阅读(477)  评论(0)  编辑  收藏  举报