Vue中使用animate.css库

最新推荐文章于 2024-08-07 15:34:36 发布

头铁的无法自拔

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/ybb520chongren_/article/details/87370356

版权

animate.css是一种动画效果的css库,在vue中可以直接通过引用该库可以达到自己想要的动画效果，下面一起来看下vue是如何引用animate.css库的

1.第一步：

在浏览器中搜索animate.css官网，如图所示

2.第二步：

点击Down Animate.css下载，，下载成功后引入vue中

3.第三步

将animate.css复制进来，然后通过link引入，，其中swing和shake代表动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的使用animate.css库</title>
    <script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
    <link rel="stylesheet" type="text/css"  href="animate.css">
</head>
<body>
<div id="app">
    <transition  name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
        <div v-show="show">hello world</div>
    </transition>
    <button  @click="handleBtnClick">change</button>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            show:true
        },

        methods:{
            handleBtnClick:function () {
                this.show=!this.show
            }
        }
    })
</script>


</body>
</html>