vue组件中使用＜transition＞＜/transition＞标签过渡动画

最新推荐文章于 2024-07-02 16:56:38 发布

秋英之空

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量735

点赞数 1

分类专栏： vue

原文链接：https://www.cnblogs.com/nimon-hugo/p/12857410.html

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue组件中使用标签过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
    <style>
        /*v-enter 是进入之前，元素的起始状态*/
        /*v-leave-to 离开之后动画的终止状态*/
        .v-enter,.v-leave-to{
            opacity:  0;/*透明度*/
            transform: translateX(150px);
        }
         /*入场(离场)动画的时间段   */
        .v-enter-active,.v-leave-active{
            transition: all 0.8s ease;

        }


        .my-enter,.my-leave-to{
            opacity:  0;/*透明度*/
            transform: translateY(70px);
        }
        .my-enter-active,.my-leave-active{
            transition: all 0.8s ease;

        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <input type="button" value="toggle2" @click="flag2=!flag2">

        <!--1. 使用transition元素把需要被动画控制的元素，包裹起来-->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>

        <transition  name="my">  <!--区分不同组织间动画-->
            <h6 v-if="flag2">这是一个H6</h6>
        </transition>
    </div>

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

       },
    });

</script>
</body>
</html>

秋英之空

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue组件中使用＜transition＞＜/transition＞标签过渡动画

vue组件中使用标签过渡动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定义两组样式，来控制transition
复制链接

扫一扫

专栏目录