[VUE+animated]vue使用动画组件库

[VUE+animated]vue使用动画组件库

众所周知,vue里带有原生的动画组件,不过那个玩意儿太难用了,而且太费脑子,这个animated动画库是我认为比较好用的
http://www.jq22.com/yanshi819
这是animated的动画效果演示地址

第一步:安装
npm install animate.css --save
第二步:main组件引入
import animated from ‘animate.css’
Vue.use(animated)
第三部:使用
我跳过路由配置什么烂七八糟的了,直接上使用结果

<template>
    <div>
    //class里可以放动画样式,在animated官网里查下就ok了
        <p v-if="flag" class="box animated bounceInDown">
            我是动画组件哦
        </p>
        <button @click="show()">出现消失</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag: false
            }
        },
        methods: {
            show() {
                this.flag=!this.flag
            },
        },
    }
</script>