1.安装:

 npm install animate.css --save

2.引入及使用:

//main.js中
import animated from 'animate.css'
Vue.use(animated)

3.在vue文件中使用:

 <div class="ty">
<!-- 直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 -->
<div class="box animated bounceInDown"></div>
</div>

vue中使用animate.css动画库的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  5. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

  6. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  7. (生产)animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  8. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  9. 3个CSS动画库,比Animated还好用,让你的网站酷炫起来

    本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处 整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中 ...

随机推荐

  1. (原)ubuntu中安装tensorflow

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6592052.html 参考网址: https://www.tensorflow.org/install ...

  2. HTTP 接口响应数据解析

    转自:https://blog.csdn.net/hubanbei2010/article/details/79878567 作为产品线的支撑角色QA/CI/CD等,http api解析是互联网公司中 ...

  3. iOS 10 之 网络权限带来的坑

    症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...

  4. 【LeetCode】174. Dungeon Game

    Dungeon Game The demons had captured the princess (P) and imprisoned her in the bottom-right corner ...

  5. kubernetes删除pod失败

    一.概述 k8s中删除pod失败,可能是该pod有rc,rs上层控制,而且很有可能,所以删除上层对应的rc,rs,deployment即可: 删除的方法: 1.直接删除rc,rs,deployment ...

  6. Unix考古记:一个“遗失”的shell

    谨以此文纪念伟大的计算机科学巨匠Ken Thompson和Dennis Ritchie,并同时向其他所有为Unix发展做出贡献的黑客致敬. 历史的尘埃 Unix作为一个举世闻名的操作系统已有40余年的 ...

  7. markdown中的锚点处理

    markdown markdown是一个相对简单的DSL,定义了简单的标签来描述html文档格式. 比如: #一级标题 来生成html <h1>一级标题<h1> ##二级标题 ...

  8. CUDA 中的计时方法

    问题描述:一般利用CUDA进行加速处理时,都需要测试CUDA程序的运行时间,来对比得到的加速效果. 解决方法: 1).GPU端计时,即设备端计时. 2).CPU端计时,即主机端计时. 设备端计时有两种 ...

  9. linux 免密码登录

    linux 免密码登录 配置 test 为本地linux 192.168.1.70 为远程linux [root@test:/home/root]$ssh-keygenGenerating publi ...

  10. Android自己定义ViewGroup(二)——带悬停标题的ExpandableListView

    项目里要加一个点击可收缩展开的列表,要求带悬停标题,详细效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon ...