17.Vue.js :过渡和动画 animate动画库

最新推荐文章于 2024-08-15 10:21:01 发布

屋顶上的小喵

最新推荐文章于 2024-08-15 10:21:01 发布

阅读量1.3k

点赞数

分类专栏： Vue.js 文章标签： Vue.js animate动画库

本文链接：https://blog.csdn.net/vivian_1122/article/details/88757631

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>

<body>
    <div id="app">
        <!-- enter-active-class 定义进入动画的状态
          leave-active-class 定义离开动画的状态
       -->
        <transition enter-active-class='animated zoomIn' leave-active-class='animated hinge'>
            <p v-if='isShow'>{{name}}</p>
        </transition>
        <button @click='isShow=!isShow'>点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'vivi',
                isShow: true
            }
        })
    </script>
</body>

</html>