vue位移动画

最新推荐文章于 2024-06-04 01:26:19 发布

话小说

最新推荐文章于 2024-06-04 01:26:19 发布

阅读量653

点赞数

文章标签： vue.js 动画 javascript

本文链接：https://blog.csdn.net/ajdhakj6/article/details/128600713

版权

vue动画设置

把需要显示隐藏做动画的标签放入transition组件中作为子标签

注意：transition标签要求仅有一个子标签，多余的不会渲染，如果需要在一个组件中实现多种动画效果，需要给transition添加属性name以区分动画

1. 在css中设置动画效果，标签显示和隐藏是两个动画过程，叫做入场和出场。添加transition组件后，vue会自定定义入场和出场效果的class值，通过class设置动画
2. 入场:标签的显示过程 v-enter v-enter-active v-enter-to
出场:标签的隐藏过程 v-leave v-leave-active v-leave-to

如果需要设置多个标签动画，需要给transition添加属性name，在设置动画效果时，就可以单独设置这个transition的入场和出场，只需要把v-前缀改成name值前缀即可如： .v-enter 改成 .yu-enter

一个标签动画的设置：

 <style>
        .v-enter {
            opacity: 0;
        }
        
        .v-enter-active {
            transition: 2s;
        }
        
        .v-enter-to {
            opacity: 1;
        }
        
        .v-leave {
            opacity: 1;
        }
        
        .v-leave-active {
            transition: 2s;
        }
        
        .v-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <button @click="bool=!bool">显示/隐藏</button>
        <transition>
            <h3 v-if="bool">111</h3>
        </transition>

    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                bool: true
            },
            methods: {

            }
        })
    </script>
</body>