动画-自定义 v-前缀

最新推荐文章于 2024-07-11 10:59:33 发布

欢莱

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量104

点赞数

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

本文链接：https://blog.csdn.net/RR_chen/article/details/117666485

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 2.自定义两组样式,来控制transition 内部的元素实现动画 -->

    <style>
        /*  v-enter [这是一个时间点]是进入之前 ,元素的起始状态,此时还没有开始进入 */
        /*  v-leave-to [这是一个时间点]是动画离开之后 ,离开的终止状态,此时，元素动画已经结束 */
        .v-enter,
        .v-leave-to {
            /* 进入和离开时透明度都是0 */
            opacity: 0;
            /* 进入和离开时位置都是在x轴150px处 */
            transform: translateX(150px);
        }

        /*  v-enter-active [入场动画的时间段]*/
        /*  v-leave-active [离场动画的时间段] */
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }

        .my-enter,
        .my-leave-to {
            /* 进入和离开时透明度都是0 */
            opacity: 0;
            /* 进入和离开时位置都是在y轴100px处 */
            transform: translateY(100px);
        }

        /*  my-enter-active [入场动画的时间段]*/
        /*  my-leave-active [离场动画的时间段] */
        .my-enter-active,
        .my-leave-active {
            transition: all 0.9s ease;
        }
    </style>
</head>

<body>
    <div id="app">

        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求:点击按钮， 让h3显示，再点击，让h3隐藏 -->
        <!-- 1.使用transition 元素,把需要被动画控制的元素，包裹起来 -->
        <!-- transition 元素，是Vue官方提供的 -->
        <transition>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>

        <hr>

        <!-- 没有name属性的<transition>的元素共用 v-enter 等 类 -->
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition>
            <h6 v-if="flag2">这是一个h6</h6>
        </transition>

        <hr>

        <!-- <transition>有name属性将不会和其他有<transition>标签的元素共用  v-enter 等 类 -->
        <input type="button" value="toggle3" @click="flag3=!flag3">
        <transition name="my">
            <!-- 相应的 v-enter 类 将改为 my-enter，即v替换为my 
            这样可以改变类里的属性值，即可有自己私有的样式了-->
            <h6 v-if="flag3">这是一个向上下过渡移动的h6</h6>
        </transition>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false,
                flag3: false
            },
            methods: {}
        })
    </script>
</body>

</html>

效果：

在这里插入图片描述

欢莱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
动画-自定义 v-前缀

例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫