引入
方法一:
从官网下载: 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
包含了不同类型的抖动动画的CSS
动画库。
引用
npm i csshake
使用
直接根据csshake给的class类名使用
<div class="shake-hard"></div>
效果