在vue项目中使用animate.css

第一步：安装

npm安装

npm install animate.css --save

yarn安装

yarn add animate.css 

 第二步：使用

main.js中

import animated from 'animate.css'
Vue.use(animated)

vue中(animate__animated是基类，必须要写)

<template>
    <div class="box">
        <div class="animate__animated animate__bounce">我是内容</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    methods: {},
    mounted() {
    }
};
</script>

<style lang="less" scoped>
.box{
    &>div{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
        margin: 100px auto;
    }
}
</style>

这个时候你就会发现有效果了，当然你也可以用js控制元素的动画，也可以控制元素动画的延迟时间，持续时间，等等，这些在官网都可以找到,下面附上官网地址

 参考文档：Animate.css | A cross-browser library of CSS animations.