admin 管理员组

文章数量: 1087652

Vue配合animate.css样式库实现过渡动画

Vue配合animate.css样式库实现过渡动画

Vue自带有实现过渡动画效果的标签以及相关的属性与方法，加上Animate.css外部样式库，对于不擅长Css却想要实现某些过渡效果非常有用

animate.css的引入与使用

安装：

npm -i install animate.css

animate.css 官网
/
这个官网有时一般能访问到，看情况。
进入官网有这么一段代码描述：
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>

实现效果（因为是动画就不演示了可以自行试试）：

本文标签： Vue配合animatecss样式库实现过渡动画

版权声明：本文标题：Vue配合animate.css样式库实现过渡动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700323300a396706.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。