Vue动画实现之animate第三方类库

最新推荐文章于 2025-04-02 18:04:45 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2025-04-02 18:04:45 发布

阅读量817

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/99082852

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

引入css

<link href="./css/Animate.css" rel="stylesheet">

使用transition标签控制区域

bounceIn 、bounceOut为相关动作animated 固定写法，可以加到

 <p v-if="flag" class="animated">{{msg}}</p>

 <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:200,leave:200 }"
    >
        <!--需求：点击按钮，让p显示，再点击，让p隐藏-->
        <p v-if="flag">{{msg}}</p>
    </transition>

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
    <!-- Bootstrap -->
    <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <link href="./css/Animate.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <input type="button" value="戳我进入" @click="flag=!flag">
    <!--模板网站：https://daneden.github.io/animate.css/-->
    <!--duration表示进出场时间,可以分别设置和独立设计-->
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:200,leave:200 }"
    >
        <!--需求：点击按钮，让p显示，再点击，让p隐藏-->
        <p v-if="flag">{{msg}}</p>
    </transition>
</div>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            msg: 'hellfo  vue.js.',
            flag: false
        }
    });
</script>
</body>
</html>