首页 > 代码库 > vue2.0transition过渡的使用介绍

vue2.0transition过渡的使用介绍

2024-09-11 02:11:37   216人阅读

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style type="text/css">
        p {
            width: 300px;
            height: 300px;
            background: red;
        }
        /* 定义动画 */
        .fade-enter-active,.fade-leave-active {
            transition: all 1s ease;
        }


        /* 
        * 定义过渡 
        */
    
        /* .fade-enter,.fade-leave-active {
            opacity: 0
        } */

        /* 
        * 定义宽高动画 
        */
        .fade-enter-active{
        opacity:1;
        width:300px;
        height:300px;
    }
    .fade-leave-active{
        opacity:0;
        width:100px;
        height:100px;
    }
    /* 重要：定义初始状态 */
    .fade-enter{
        opacity:0;
        width:100px;
        height:100px;
    }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var app = new Vue({
                el:‘#box‘,
                data:{
                    show:false
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <!-- 控制数据的值切换显示隐藏 -->
        <button @click="show=!show">transition</button>
        <transition name="fade">
        <p v-show="show"></p>
        </transition>
    </div>
</body>
</html>

 

vue2.0transition过渡的使用介绍


联系
我们