【vue.js】用vue.js的transition组件结合css3的transitions属性轻松实现过渡效果的小小小demo

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .box1{
            display:none;
        }
        .box2{
            background:pink;
            width:100px;
            height:100px;
            opacity:1;
            margin-left:0;
        }

        /*CSS3的transition属性:
            当它进入过渡的时候(隐藏→显示),就会依次发生:
                1. 添加.box-enter
                2.  删除.box-enter,添加 .box-enter-active
                3.  删除.box-enter-active

             当它离开过渡的时候(显示→隐藏),就会依次发生:
                1. 添加.box-leave
                2. 删除.box- leave,添加 .box- leave-active
                3. 删除.box- leave -active
        */

        .box2-enter-active,.box2-leave-active{
            transition:all 0.8s;
        }
        .box2-enter{
            margin-left:100%;
            opacity:0;
        }
        .box2-leave{
            margin-left:0;
            opacity:1;
        }
        .box2-leave-active{
            margin-left:100%;
            opacity:0;
        }

    </style>
</head>
<body>
<div id="app">
    <button @click="showBox=!showBox;hideBox=!hideBox" class="btn">切换</button>
    <div class="container" style="width:100px;overflow:hidden;">

        <!--vue.js中的transition组件配合CSS3的动画知识,轻松实现过渡效果
            注意CSS3的transition属性与vue.js中的transition组件仅名字相同,是完全不同的东西-->
        <transition name="box2">
            <!--方法一:通过v-show指令控制显示/隐藏-->
            <div class="box2" v-show="showBox">方法一</div>
        </transition>

        <!--方法二:动态添加class属性控制显示/隐藏-->
        <div :class="{'box1':hideBox}" style="background: #0A7EC3;width:100px;height:100px; margin-bottom:20px;">方法二</div>
    </div>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            hideBox:true,
            showBox:false,
        },
    });
</script>
</html>

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值