vue中使用第三方类实现动画

最新推荐文章于 2023-02-15 16:39:05 发布

写代码的小珊子

最新推荐文章于 2023-02-15 16:39:05 发布

阅读量300

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44759289/article/details/101620186

版权

vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

vue中使用第三方插件animate.css实现动画效果
1.首先先引入第三方类animated.css
2.将你所需要动画的标签用包裹起来
3.在transition元素中添加enter-active-class/leave-active-class入场离场属性
但是设置的值前面必须加上animated（当然也可以不在transition上设置animated，可以在你所要进行动画的标签上设置class属性为animated）
4.也可以加入:duration来统一设置入场和离场时候的时长
案例如下

<!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">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/animate.css">
</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> -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration:"400">
                <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
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
vue中使用第三方类实现动画

vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-class/leave-active-class入场离场属性但是设置的值前面必须加上animated（当然也可以不在transition上设置animated，可以在你所要进行动画的标签上设置c...
复制链接

扫一扫