animate.css在vue项目中的使用教程
更新时间：2018年08月05日 16:49:03 作者：花落微凉梦清幽
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库，下面我们开始介绍在vue中单独使用animate动画，感兴趣的朋友一起看看吧
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库（详情可见vue官网-过渡：过渡），下面我们开始介绍在vue中单独使用animate动画，其实也非常简单，两步留可以实现：
第一步：安装：
在命令行中执行：npm install animate.css --save
第二步：引入及使用：
main.js中：
import animated from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animated)
使用：
vue模板中：
<div class="ty"> <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 --> <div class="box animated bounceInDown"></div> </div>
总结
以上所述是小编给大家介绍的animate.css在vue项目中的使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧2018-11-11
这篇文章主要介绍了如何给element添加一个抽屉组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
本篇文章主要介绍了详解给Vue2路由导航钩子和axios拦截器做个封装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了超详细的5个Shell脚本实例分享(值得收藏),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue-router实现tab标签页的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
vue利用better-scroll实现轮播图与页面滚动详解
在我们日常的项目开发中，处理滚动和轮播图是再常见不过的需求了，下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-10-10
本文主要介绍了解决vue组件渲染没更新数据问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
KeepAlive 是一个内置组件，那封装一个组件对于大家来说应该不会有太大的困难，它的核心逻辑在于它的 render 函数，它用 map 去记录要缓存的组件，就是 [key，vnode] 的形式，这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例，非常具有实用价值，需要的朋友可以参考下2017-06-06
最新评论