16.Vue.js : 过渡和动画 css类名

最新推荐文章于 2020-12-16 10:27:47 发布

屋顶上的小喵

最新推荐文章于 2020-12-16 10:27:47 发布

阅读量183

点赞数

分类专栏： Vue.js 文章标签： vue动画

本文链接：https://blog.csdn.net/vivian_1122/article/details/88755769

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

显示隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-if='isShow'>{{name}}</p>
        <button @click='isShow=!isShow'>点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'vivi',
                isShow: true
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style>
        /* 2.定义类名 */
        /* 定义进入过渡的开始状态 */
        
        .slide-enter,
        .slide-leave-to {
            padding-left: 100px;
        }
        
        .slide-enter-active,
        .slide-leave-active {
            transition: all 2s;
        }
        
        .slide-enter-to,
        .slide-leave {
            padding-left: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 1.找到需要加过渡的元素，把它用transition标签包裹起来，然后给transition标签指定name属性
          这个name 属性会作为类名的前缀
         -->
        <transition name='slide'>
            <p v-if='isShow'>{{name}}</p>
        </transition>
        <button @click='isShow=!isShow'>点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'vivi',
                isShow: true
            }
        })
    </script>
</body>

</html>