Vue执行动画(transition)

最新推荐文章于 2024-08-29 19:30:00 发布

无名之辈无名之辈

最新推荐文章于 2024-08-29 19:30:00 发布

阅读量900

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/114984830

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue中的动画机制: 参考

Vue中的动画可以认为是有生命周期的:

下面前四个事件是元素进入中到完成进入
后四个是元素离开时到完全离开

<transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
    >
        <!-- ... -->
    </transition>

1.`transition`使用默认的前缀定义动画:

    <!--自定义两组样式来控制transition内部元素实现动画-->
    <style>
        /*v-enter[这是一个时间点]是进入之前,元素的起始状态,此时还没有开始进入*/
        /*v-leave-to[这是一个时间点] 是动画离开之后,离开的终止状态,此时元素动画已经结束*/
        /*
        这里的v-enter,v-leave-to等是为transition定义动画效果的
        */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(80px);
        }
        /*v-enter-active [入场动画的时间段]*/
        /*v-leave-active [离场动画的时间段]*/
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!--1.使用transition使元素动起来-->
    <!--transition是官方提供的-->
    <transition>
        <h3 v-if="flag">这是一个h3</h3>
    </transition>
</div>

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

此处是在html中定义了一个transition标签,再使用默认的过渡的类名来设置动画

效果: 啊这,自己试一试吧,gjf图不太好整

2.`transition`使用自定义的前缀定义动画:

<style>
		/*默认前缀的样式*/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
        /*my-前缀的样式*/
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .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">
    <!--
    transition中.为他定义属性的前缀默认是v-
    -->
    <transition>
        <h3 v-if="flag">这是一个h3</h3>
    </transition>
    <hr>
    <input type="button" value="toggle2" @click="flag2=!flag2">
    <!--此时如果不想和上面的功用一个style,可以为transition定一个name--->
    <!--
    从而使该transition的样式定义的前缀为my-
    -->
    <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>