关于vue的动画效果

最新推荐文章于 2024-08-24 17:31:28 发布

明阳mark

最新推荐文章于 2024-08-24 17:31:28 发布

阅读量88

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36939013/article/details/90704667

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

vue的动画需要先写transition并且指定name,然后用name拼接一个固定字符串来表示样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*显示隐藏的过度 用1秒时间显示和隐藏*/
        .XXX-enter-active, .XXX-leave-active {
            transition: opacity 1s 
        }
        /*隐藏的样式*/
        .XXX-enter, .XXX-leave-to {
            opacity: 0;
        }
        .move-enter-active{
            transition: all 1s
        }
        .move-leave-active {
            transition: all 3s
        }
        /*隐藏的样式*/
        .move-enter, .move-leave-to {
            opacity: 0;
            /*向右偏移20px*/
            transform: translateX(20px);
        }
    </style>
</head>
<body>
    <div id="test">
        <button @click="isShow=!isShow">toggle</button>
        <transition name="XXX">
            <p v-show="isShow">hello</p>
        </transition>
    </div>
    <div id="test1">
        <button @click="isShow=!isShow">toggle</button>
        <transition name="move">
            <p v-show="isShow">hello</p>
        </transition>
    </div>
</body>
    <script type="text/javascript"   src="../js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#test',
            data(){
               return {
                   isShow: true,
               }
            }
        })
        new Vue({
            el: '#test1',
            data(){
               return {
                   isShow: true,
               }
            }
        })
    </script>
</html>