过渡与动画

最新推荐文章于 2025-04-12 15:36:31 发布

原创最新推荐文章于 2025-04-12 15:36:31 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍并演示了如何在Vue.js中实现动画和过渡效果，包括基本的CSS过渡、自定义动画及引入第三方动画库的方法。通过三个具体示例，展示了如何控制元素的显示与隐藏，以及如何应用复杂的动画效果。

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

过渡示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .show-enter-active, .show-leave-active{
            transition: all .6s linear
        }

        .show-enter, .show-leave-to{
            opacity: 0
        }
    </style>
</head>
<body>

<div id = "app">
    <button @click="show = !show">按钮</button>
    <transition name="show">
        <p v-show="show">test</p>
    </transition>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>

动画示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .show-enter-active{
            animation: bounse-in 0.5s
        }
        .show-leave-active{
            animation: bounse-in 0.5s reverse
        }
        @keyframes bounse-in {
            0%{
                transform: scale(0);
            }

            50%{
                transform: scale(1.5);
            }

            100%{
                transform: scale(1);
            }
        }

    </style>
</head>
<body>

<div id = "app">
    <button @click="show = !show">按钮</button>
    <transition name="show">
        <p v-show="show" style="text-align: center">testtesttesttesttesttesttesttesttesttest</p>
    </transition>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>

用三方的动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: '#databinding',
    data: {
        show: true
    }
})
</script>
</body>
</html>