初识 Vue(26)---( Vue 中多个元素或组件的过渡动画)

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

实现多个元素的过渡动画的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue 中多个元素或组件的过渡动画</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.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>
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>
      <button @click="handleClick">toggle</button>
    </div>

    <script>
     var vm = new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                Velocity(el,{opacity:1},
                    {duration:1000,
                     complete:done
                    })
            },
            handleAfterEnter:function(el){
               console.log("动画结束") 
            }
        }
       })
    </script>   
</body>
</html>

输出:点击--- Hello World 逐渐隐藏(1s),Bye World 直接出现---再次点击--- Bye World 逐渐隐藏 ,Hello World 直接出现

           

防止 Vue 中 div 出现复用,添加不同的 key值

<transition>
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

 

Vue 还提供 mode 配置参数 设置多个属性切换时的效果

(in-out : 多个元素显示时,先显示的元素先进入,要隐藏的元素才会被隐藏;)

 <div id ='root'>
      <transition mode="in-out">
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

输出:点击--- Bye World 逐渐出现(1s)Hello World才隐藏---再次点击--- Hello World 逐渐出现 (1s),Bye World 才隐藏

            

(out-in : 多个元素显示时,要隐藏的元素先隐藏,要显示的元素先进入;)

 <transition mode="out-in">
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

输出:点击--- Hello World逐渐隐藏(1s)Bye World 出现---再次点击--- Bye World 逐渐隐藏 (1s), Hello World才出现

            

 

实现多个组件的过渡动画的效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue 中多个元素或组件的过渡动画</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.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="out-in">

        <child v-if ="show" ></child>
        <child-one v-else></child-one>
      </transition>
      <button @click="handleClick">toggle</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:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show

            }
    
        
       }
    })
    </script>   
</body>
</html>

输出:点击--- child逐渐隐藏(1s)child-one 出现---再次点击--- child-one 逐渐隐藏 (1s), child才出现

                 

 

通过动态组件来实现

component 来定义动态组件,通过 is 属性来将组件和定义的组件名做绑定,来控制执行那个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue 中多个元素或组件的过渡动画</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.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="out-in">
        <component :is="type"></component>
        <!-- <child v-if ="show" ></child>
        <child-one v-else></child-one> -->
      </transition>
      <button @click="handleClick">toggle</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'
             //type 是否为 child ,如果是则赋值为 child-one,不是则赋值为 child
            }
    
        
       }
    })
    </script>   
</body>
</html>

输出:点击--- child逐渐隐藏(1s)child-one 出现---再次点击--- child-one 逐渐隐藏 (1s), child才出现

                 

methods:{
            handleClick:function(){
                this.type = this.type === 'child' ? 'child-one' : 'child'
             
            }

判断type 是否为 child ,如果是则赋值为 child-one,不是则赋值为 child

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值