初识 Vue(28)---(Vue 中的动画封装)

本文介绍如何在Vue中封装动画功能,通过自定义组件简化动画效果的实现过程,并演示了使用CSS及JavaScript两种方式来实现元素的显示与隐藏动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue 中的动画封装

功能:点击按钮,hello world 出现,再点击隐藏

<!DOCTYPE html>
<html lang="en">
<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>
        <div v-show="show" >
        hello world
        </div>
      </transition>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
   
  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击--出现--隐藏

                  

封装这个动画功能

<!DOCTYPE html>
<html lang="en">
<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'>
      
     <fade  :show="show"> //等于父组件的变量  
        <div>   
        hello world
        </div>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
    Vue.component('fade',{
      props:['show'],
      template:`
        <transition>
            <slot v-if="show"> </slot>     //判断外部传来的DOM是否要被显示
        </transition>
        ` 
    })
    
  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击--出现--隐藏

                  

 

封装的好处:不需再设置动画样式,直接输入内容就好

<body>
    <div id ='root'>
      
     <fade  :show="show"> 
        <div>   
        hello world
        </div>
     </fade>

     <fade  :show="show"> 
        <h1>   
        hello world
        </h1>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

输出:

        

 

可以将 样式 也封装进去,只能使用 JS 动画实现(推荐)

<!DOCTYPE html>
<html lang="en">
<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'>
      
     <fade  :show="show"> 
        <div>   
        hello world
        </div>
     </fade>

     <fade  :show="show"> 
        <h1>   
        hello world
        </h1>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
    Vue.component('fade',{
      props:['show'],
      template:`
        <transition @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        >
        <slot v-if="show"> </slot>    
        </transition>
        ` ,
        methods:{
          handleBeforeEnter:function(el){
              el.style.color = 'red'
          },
          handleEnter:function(el,done){
            setTimeout(() =>{
                el.style.color = 'green'
                done()
            },2000)
          }
        }
    })

  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击---显示---2秒后变绿色(将样式都封装到 fade 组件里面,外部只需调用 fade 组件即可)

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值