vue中使用animate.css
如何在vue中使用animate.css
·
前言
在网上找了好多的文章,在vue中如何使用animate.css 但是都不是太详细所以在这里自己写一个详细一点的文章
官方文档
一、animate.css?
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。
二、使用步骤
1.下载库
代码如下(示例):
npm install animate.css 这个话直接下载的是最新版本的
npm install animate.css@0.0.0 这个@后面表示的是版本号 表示下载指定版本的
使用在线的cdn库 在vue项目中的index.html页面引入
<!DOCTYPE html>
<html lang="">
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.引入库
代码如下(示例):
在vue的 main.js 文件中直接引入
import animated from 'animate.css'
3.使用方式
我这个是配合vue的Transition组件使用的,实际使用根基自己项目实际情况自行使用
因为animate.css的版本不同,所以在使用方式上也有所不同
4.0.0版本的使用方式也就是最新的使用方式
<transition enter-active-class="animate__animated animate__fadeInUp"
leave-active-class="animate__animated animate__fadeInDown">
<div v-show="show">
。。。。。。一些代码片段
</div>
</transition>
4.0.0版本一下的使用方式也就是老版本的使用方式
<transition enter-active-class="animated fadeInUp"
leave-active-class="animated fadeInDown">
<div v-show="show">
。。。。。。一些代码片段
</div>
</transition>
总结
本片文中主要讲述了在vue中如何对animate.css进行安装、引入和使用,没有什么难点,只要是版本的问题对使用的方式有所影响。
更多推荐
已为社区贡献1条内容
所有评论(0)