Vue动画—第三方类库实现动画

最新推荐文章于 2024-06-06 16:40:41 发布

何迟

最新推荐文章于 2024-06-06 16:40:41 发布

阅读量1.3w

点赞数 1

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82845284

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

1.使用了Animate类库，方便直接调用各种动画。点击进入官网

2.用法大致同Bootstrap

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>
<body>

    <div id="app">
        <div>
            <input type="button" value="显示/隐藏" @click="flag=!flag" :duration="2000">
            <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
                <h3 v-if="flag">陈小帅是真的帅！</h3>
                <!--通过一个标识符，然后可以不停将转换true/false，达到隐藏显示的目的-->
            </transition>
            <!--将需要转换的动画用transition承载，在头部实现样式-->
            <!--:duration可以一同设置进场和出场的时间，:duration="{enter:1000,leave:4000}分别设置"-->
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        })
    </script>
</body>
</html>

效果：

何迟

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Vue动画—第三方类库实现动画

注意：1.使用了Animate类库，方便直接调用各种动画。点击进入官网2.用法大致同Bootstrap HTML代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/titl
复制链接

扫一扫