//引入库

<link rel="stylesheet" type="text/css" href="animate.css">

（https://daneden.github.io/animate.css/）

//用法

//enter-active-class="animated   动画类名"     leave-active-class="animated    动画类名"   :duration 定义动画进入时长和离开时长
<transition name="fade" :duration="{enter:5000,leave:5000}"  enter-active-class="animated jello"  leave-active-class="animated shake"> <div v-if="show">hello</div> </transition>

　　同时有动画和过渡效果

在<transition></transition>里面加入自定义属性  appear(自定义)   appear-active-class="animated shake"

这样就可以实现第一次加载也有动画的效果

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

  1. vue 使用Animate.css库

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue 结合 animate.css

    这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...

  3. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  4. vue与animate.css的结合使用

    在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...

  5. 在vue.js 中使用animate.css库

    main.js文件引入后,在vue文件里直接添加class   animated bounceInUp

  6. vue中使用animate.css

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

  7. 全面解析vue-cli生成的项目中使用其他库（js库、css库）

    前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用.但是个人建议最好不要用了,用人家vue提供的不好嘛. 一.用vue-cli生成项目 1. v ...

  8. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. pycharm开发django项目 static报404解决方法

    settings文件中确保有以下配置 # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.10/ ...

  2. tp5服务器验证案例

    1.验证器代码 <?php namespace app\user\validate; use think\Validate; use Potting\IDCard; /** * 山区治理报名验证 ...

  3. 弱网测试—Network-Emulator-Toolkit工具

    参考别人网址:http://blog.csdn.net/no1mwb/article/details/53638681 弱网测试,属于健壮性测试:怎么样去做弱网测试呢? 一.安装弱网测试工具-Netw ...

  4. WEB开发库收集

    1. EASYUI          http://www.jeasyui.com/ [INTRODUCTION] jQuery EasyUI framework helps you build yo ...

  5. awk 文本处理工具

    awk: 强大的文本处理工具,擅长对日志文件进行分析: 不仅用于Linux,也是任何环境中现在的功能最强大的数据处理引擎: 语法说明: awk '{pattern + action}' {filena ...

  6. Winfrom控件使用

    1.Lablelable添加图片,解决图片和字体重叠? Text属性添加足够空格即可,显示效果如下所示: 2.根据窗体名称获取窗体并显示到指定panel? Label item = sender as ...

  7. Azure PowerShell (15) 批量导出Azure ASM/ARM VM信息

    <Windows Azure Platform 系列文章目录> 客户又提出新的需求,需要知道所有订阅下的虚拟机数量.运行情况等信息. 我花了点时间,写了一个PowerShell脚本,发布到 ...

  8. 申请免费通配符证书(Let's Encrypt)并绑定IIS

    申请免费通配符证书(Let's Encrypt)并绑定IIS 2018-05-25 18:01 by Giant Liu, 800 阅读, 4 评论, 收藏, 编辑 什么是 Let’s Encrypt ...

  9. PHP 打印前一天的时间

    时间格式为 2000-02-02 02:02:02 echo date('Y-m-d H:i:s', strtotime( '-1 day', time() ) ):

  10. 使用RetionalRose根据现有的java工程逆向生成类图

    1.进入RetionalRose选择J2EE模板 2.在菜单栏选择tools->java/j2EE->reverse engineer 3.编辑路径Edit CLASSPATH选择要生成类 ...