vue2.0transition过渡的使用介绍

Posted 2020-09-07 wmui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.0transition过渡的使用介绍相关的知识，希望对你有一定的参考价值。

直接上代码

<!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过渡的使用介绍的主要内容，如果未能解决你的问题，请参考以下文章

Unity 工具之 SoftMask软遮罩实现 UI 边缘渐变过渡的简单使用介绍