Vue使用animate.css实现过度动画

最新推荐文章于 2024-09-05 08:51:26 发布

原创最新推荐文章于 2024-09-05 08:51:26 发布 · 637 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Vue.js实现页面元素的过渡动画效果，通过一个简单的按钮切换H3标签的例子，展示了如何应用Vue的Transition组件及自定义CSS类来创建平滑的动画过渡。文章深入探讨了Vue动画的基本原理，包括进入和离开的活动类名设置，以及如何通过data属性控制元素的显示和隐藏。

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

<!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">
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.min.js"></script>
    <link href="./lib/animate.css" rel="stylesheet" type="text/css">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <button @click="toggle">toggle</button>
        <transition enter-active-class="lightSpeedIn" leave-active-class="lightSpeedOut" :duration="{ enter: 500, leave: 300 }">
            <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                flag:true
            },
            methods: {
                toggle(){
                    this.flag=!this.flag
                }
            }
        })
    </script>
</body>

</html>