Vue配合animate.css样式库实现过渡动画
Vue自带有实现过渡动画效果的标签以及相关的属性与方法,加上Animate.css外部样式库,对于不擅长Css却想要实现某些过渡效果非常有用
animate.css的引入与使用
安装:
npm -i install animate.css
animate.css 官网
https://animate.style/
这个官网有时一般能访问到,看情况。
进入官网有这么一段代码描述:
After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don’t forget the animate__ prefix!):
<h1 class="animate__animated animate__bounce">An animated element</h1>
在使用具体样式类之前是要引入这两个类的
之后在官网界面的右侧,展示了那些类的效果,复制类名引入就可以具体使用。
下面是具体的使用方法
Vue+animate.css实现过渡动画效果的方法
代码实现:
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!--
transition标签作用:可以为标签中的内容用Vue的方法实现过渡动画效果
appear属性则是开启出场过渡动画
name指定使用的样式类
enter-active-class类:name指定的类中用于进入动画的样式类
leave-active-class类:name指定的类中用于离开动画的样式类
-->
<transition appear
name="animate__animated animate__bounce"
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutDown">
<h2 v-show="isShow">{{clickName}}</h2>
</transition>
</div>
</template>
<script>
import 'animate.css' //这里是引入css文件,所以不要写成:import...from...
export default {
name:'TestTransition',
data() {
return {
isShow:true,
clickName:'过渡动画'
}
},
}
</script>
<style scoped>
h2 {
text-align:center;
background-color: aqua;
width: 50%;
}
</style>
实现效果(因为是动画就不演示了可以自行试试):