20vue学习——动画之自定义v-前缀

最新推荐文章于 2023-11-23 09:21:53 发布

0563xixi

最新推荐文章于 2023-11-23 09:21:53 发布

阅读量262

点赞数 4

本文链接：https://blog.csdn.net/weixin_42530160/article/details/98453353

版权

20vue学习——动画之自定义v-前缀

前言

我们在前面学习了如何使用过渡类名来设置相应的动画，但是我们定义的类名前面都带有一个 v- 的前缀。可能会有小伙伴就有疑问了，为什么一定要带这个 v- 前缀呢？原来是因为 vue 提供的 transition 元素规定的，用来识别这是属于 vue 的特有样式来实现动画的。这个 v- 前缀的过渡类是作用在所有的 transition 元素身上的，有时候我们不想要所有的 transition 都使用同一种动画，这个时候就需要我们来自定义 v- 动画的前缀了。接下来让我们来看看怎么做吧！

总结

（1）v- 前缀的过渡类是作用在全部的 transition 元素身上的，具有通用性
（2）自定义的过渡类前缀是作用在特定的 transition 元素身上的，具有专用性

1.无自定义前缀的两个 transition 元素共用相同的动画

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画之自定义v-前缀</title>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 
            没有自定义过渡类前缀的一组
        -->
        <input type="button" value="toggle1" @click="flag1=!flag1">
        <transition>
            <h3 v-show="flag1">我是用来展示无自定义前缀的h3</h3>
        </transition>
        <input type="button" value="toggle2" @click="flag2=!flag2"> 
        <transition>
            <h6 v-show="flag2">我是用来展示无自定义前缀的h6</h6>
        </transition>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                flag1:true,
                flag2:true,
            }
        })
    </script>
</body>
</html>

结果——两个 transition 元素包裹的元素都是共有同一组动画
在这里插入图片描述

2.自定义前缀的两个 transition 元素各自使用不同的动画

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画之自定义v-前缀</title>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }


        .my-enter,.my-leave-to{
            opacity: 0;
            transform: translateY(300px);
        }
        .my-enter-active,.my-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 
            自定义了前缀的一组
        -->
        <input type="button" value="toggle3" @click="flag3=!flag3">
        <transition>
            <h3 v-show="flag3">我是用来展示自定义了前缀的h3</h3>
        </transition>
        <input type="button" value="toggle4" @click="flag4=!flag4"> 
        <!-- 
            自定义下面这个 name属性的值为 my 的transition 的过渡类是以 my- 为前缀的
         -->
        <transition name="my">
            <h6 v-show="flag4">我是用来展示自定义了前缀的h6</h6>
        </transition>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                flag3:true,
                flag4:true,
            }
        })
    </script>
</body>
</html>

结果——没有设置 name 属性的 transition 元素默认使用 v- 前缀的过渡类，定义了 name 属性的 transition 元素则使用 name值- 作为前缀的过渡类
在这里插入图片描述

总结

给 transition 元素添加 name 属性例如 name=“my” ，则已经将v-前缀修改为 my- 前缀了，且 my-
前缀定义的过渡类样式只作用于属性 name 的值为 my 的 transition 元素。则自定义前缀可以用来区分不同组的动画

0563xixi

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20vue学习——动画之自定义v-前缀

我们在前面学习了如何使用过渡类名来设置相应的动画，但是我们定义的类名前面都带有一个 v- 的前缀。可能会有小伙伴就有疑问了，为什么一定要带这个 v- 前缀呢？原来是因为 vue 提供的 transition 元素规定的，用来识别这是属于 vue 的特有样式来实现动画的。这个 v- 前缀的过渡类是作用在所有的 transition 元素身上的，有时候我们不想要所有的 transition 都使用同一种动画，这个时候就需要我们来自定义 v- 动画的前缀了。接下来让我们来看看怎么做吧！
复制链接

扫一扫