当前位置: 首页 > 编程笔记 >

animate.css在vue项目中的使用教程

杨飞飙
2023-03-14
本文向大家介绍animate.css在vue项目中的使用教程,包括了animate.css在vue项目中的使用教程的使用技巧和注意事项,需要的朋友参考一下

在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项目引发的「过滤器」使用教程的使用技巧和注意事项,需要的朋友参考一下 前言 最近在项目的开发中,出现一些格式化数据的情况,比如字母的大小写,比如一些价格的数据格式。等等一些格式的显示。 Name Price BTC $3896.23 ETH $136.64 在上面的表格中,我们需要处理数据的显示。这是我们时常遇到的情况。 通常我们会直接

  • 本文向大家介绍在 React、Vue项目中使用SVG的方法,包括了在 React、Vue项目中使用SVG的方法的使用技巧和注意事项,需要的朋友参考一下 在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。 而实际上,这些简单的小图标完全没

  • 本文向大家介绍vue 中swiper的使用教程,包括了vue 中swiper的使用教程的使用技巧和注意事项,需要的朋友参考一下 Install 在vue cli下的使用 npm install vue-awesome-swiper --save 在main.js中 在component.vue中 参考:https://github.com/surmon-china/vue-awesome-swip

  • 本文向大家介绍在vue项目中使用sass语法问题,包括了在vue项目中使用sass语法问题的使用技巧和注意事项,需要的朋友参考一下 Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续

  • 有大佬使用过clickhouse js吗,救命啊 想问问clickhouse js在vue项目里怎么连接数据库进行增删改查呢 没有一点头绪,求指教...

  • Animate.css 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。 安装 使用 npm 安装: $ npm install animate.css --save 或者使用 Yarn 安装: $ yarn add animate.css 将其导入文件: import 'animate.css'; 或者使用 CDN 将其直接添加到网页: <head