vue过渡类名动画

最新推荐文章于 2022-11-06 23:13:02 发布

原创最新推荐文章于 2022-11-06 23:13:02 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何在Vue中使用过渡类名实现动画效果，包括使用transition元素包裹目标元素，以及自定义CSS样式控制动画的进入和离开状态。通过实例展示了如何控制元素的显示和隐藏，并配合动画效果。

2019年8月15日
一、使用过渡类名实现动画

1.使用 transition 元素，把需要被动画控制的元素包裹起来

<div id="app">
        <transition>  <!-- transition元素包裹要控制的元素-->
        	<h3 v-if="flag">这是一个H3</h3>
   	 	</transition>
    </div>

2.需要自定义两组样式，来控制 transition 内部的元素实现动画

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

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
    .v-enter,    /* v-enter 这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入*/
    .v-leave-to{ /* v-leave-to 这是一个时间点，是动画离开之后，离开的终止状态，此时，元素动画已经结束*/
        opacity: 0;
        transform: translatex(50%)
    }

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

    .my-enter,    /* v-enter 这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入*/
    .my-leave-to{ /* v-leave-to 这是一个时间点，是动画离开之后，离开的终止状态，此时，元素动画已经结束*/
        opacity: 0;
        transform: translatey(500px)
    }

    .my-enter-active,    /* v-enter-active 入场动画的时间段*/
    .my-leave-active{   /* v-leave-active 离场动画的时间段*/
        transition:all 1s ease;
    }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮" @click="flag=!flag">
        <transition>
        <h3 v-if="flag">这是一个H3</h3>
    </transition>
    <hr>
    <input type="button" value="按钮2" @click="flag2=!flag2">
    <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>