Vue——15——使用animate.css第三方类库实现动画

最新推荐文章于 2022-09-14 20:20:57 发布

野生小米椒

最新推荐文章于 2022-09-14 20:20:57 发布

阅读量213

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107135885

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 使用第三方animate类库实现动画 -->
    <link rel="stylesheet" href="../lib/animate.css">
    <!-- 使用bounceIn动画入场  使用bounceOut动画入场 -->

</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">

        <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
          <h3 v-if="flag">这是一个h3</h3>
     </transition>  -->

        <!-- 简写,少写一个animated          使用  :duration="毫秒值" 来统一设置入场和离场时候的动画时长-->
        <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
         <h3 v-if="flag" class="animated">这是一个h3</h3>
     </transition> -->


        <!-- 使用 对象来分别设置入场的时长和离场的时长 -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:600,leave:50}">
            <h3 v-if="flag" class="animated">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,

            },
            methods: {

            }

        })
    </script>


</body>

</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——15——使用animate.css第三方类库实现动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="../lib/vue.js"></script>  <link rel="stylesheet" hr
复制链接

扫一扫

专栏目录