Animate.css的使用

引入

方法一：

从官网下载：　https://raw.github.com/daneden/animate.css/master/animate.css

方法二：

通过npm安装

npm install animate.css

方法三：

使用在线cdn

https://unpkg.com/animate.css@3.5.2/animate.min.css

基础用法

安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：

<h1 class="animate__animated animate__bounce">An animated element</h1>

练习

通过自定义过渡类名的方式引用 animate.css 动画，如何设置动画的持续时间和延迟时间

<template>
    <div class="wrap">
         <button @click="is=!is" >害嗨</button>
        <transition name='hh'>
        <div class="box" v-if="is"></div>
        </transition>
       
    </div>
</template>


<script>
export default {
    data(){
        return{
            is:false
        }
    }
}
</script>

<style lang="less" scoped>
.box{
    width: 200px;
    height: 200px;
    background-color: green;
}


.hh-enter-active{
    animation: backInRight .3s ;
}

.hh-leave-active{
    animation: fadeOutDownBig .3s;
}
</style>

推荐一个动画库

CSShake

CSShake包含了不同类型的抖动动画的CSS动画库。

引用

 npm i csshake

使用

直接根据csshake给的class类名使用

<div class="shake-hard"></div>

效果