vue中transition动画实现淡入淡出

最新推荐文章于 2025-06-11 11:20:27 发布

原创最新推荐文章于 2025-06-11 11:20:27 发布 · 2.2w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue的transition动画淡入淡出

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue中使用transition和transition-group组件实现动画过渡效果，包括元素的显示和隐藏动画，通过修改样式类实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .hehe-enter,.hehe-leave-to{
            opacity: 0;
        }
        .hehe-enter-to,.hehe-leave{
            opacity: 1;
        }
        .hehe-enter-active,.hehe-leave-active{
            transition: all 3s;
        }
    </style>
</head>
<body>
<div id="demo">
    <button v-on:click="Show">点击动画</button>
    <transition-group name="hehe">
        <h1 v-if="show" :key="1">hello</h1>
        <h2 v-if="show" :key="2">hello world!</h2>
    </transition-group>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            show:true
        },
        methods:{
           Show(){
               this.show=!this.show;
           }
        }
    });
    //需要动画元素放在transition标签内部，在样式里添加类名属性
    //多个元素使用transition-group
</script>
</body>
</html>

结果截图：