vue-transition动画和自定义前缀动画

最新推荐文章于 2024-05-23 19:22:50 发布

天马行空zqzq

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量652

点赞数 1

本文链接：https://blog.csdn.net/qq_42039912/article/details/107330072

版权

vue自带的动画：

v-enter这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 也是一个时间点，是动画离开之后，离开的终止状态，此时东湖啊已经结束了。

v-enter-active 入场动画的时间段
v-leave-active 立场动画的时间段
使用：
1、用transition元素把需要被动画控制的元素包裹起来，这个元素vue官方提供的
2、规定类样式

自定义前缀动画：

1、用transition元素把需要被动画控制的元素包裹起来，这个元素vue官方提供的，并在这个transition元素里加一个属性name=”自定义名称”
2、规定类样式，把前缀v 换成自定义名称

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
        /* 记得加点啊啊啊啊，相当于类样式 */
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(80px);
        }
        .v-enter-active, .v-leave-active {
            transition: all 2s ease;
        }


        /* 自定义类样式 */
        /* 记得加点啊啊啊啊，相当于类样式 */
        .my-enter, .my-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .my-enter-active, .my-leave-active {
            transition: all 2s ease;
        }
    </style>
</head>
<body>

    <div id="app">
        <button v-on:click="flag=!flag">切换</button>
        <transition>
            <h1 v-if="flag">哈哈，看见了吗</h1>
        </transition>

        <hr>
        <!-- 不想和上面那个共用一个动画，可以自定义一个前缀动画  -->
        <button v-on:click="flag2=!flag2">切换</button>
        <!-- 要定义一个属性 name="my", 再把前缀v替换成 my -->
        <transition name="my">
            <h1 v-if="flag2">哈哈，看见了吗</h1>
        </transition>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false
            }
        })
    </script>
</body>
</html>

天马行空zqzq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-transition动画和自定义前缀动画

v-enter这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入v-leave-to 也是一个时间点，是动画离开之后，离开的终止状态，此时东湖啊已经结束了。v-enter-active 入场动画的时间段v-leave-active 立场动画的时间段使用：1、用transition元素把需要被动画控制的元素包裹起来，这个元素vue官方提供的2、规定类样式例子：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫