1. //引入库
  2. <link rel="stylesheet" type="text/css" href="animate.css">
  3. https://daneden.github.io/animate.css/)
  4. //用法
  5. //enter-active-class="animated 动画类名" leave-active-class="animated 动画类名" :duration 定义动画进入时长和离开时长
  1. <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. express 与 koa 区别

    express 与 koa 区别 区别项 express koa 中间件模型 Compress 模型 洋葱圈模型 对象个数 只有2个对象:Request 和 Response 有3个对象:Reques ...

  2. vue-cli 3.x 使用

    vue-cli 3.x 安装:npm install -g @vue/cli vue-cli 3.x 常用命令 vue-cli 3.x 常用命令 命令含义 vue --help vue-cli 3.x ...

  3. 导入JSONPathExtractorExample.jmx文件报错,导不进去

    导入之前写的JSONPathExtractorExample.jmx文件,导入不进来,报如下错,百度搜索说是缺少jar包 复制别人的信息如下 有的时候我们会参考别人的jmx文件,但是在导入的时候会报错 ...

  4. NET设计模式 第二部分 创建型模式(6):创建型模式专题总结(Creational Pattern)

    创建型模式专题总结(Creational Pattern) ——.NET设计模式系列之七 Terrylee,2006年1月 概述 创建型模式,就是用来创建对象的模式,抽象了实例化的过程.它帮助一个系统 ...

  5. htmlcleaner使用及xpath语法初探

    一.HtmlCleaner使用: 1.HtmlCleaner HtmlCleaner是一个开源的Java语言的Html文档解析器.HtmlCleaner能够重新整理HTML文档的每个元素并生成结构良好 ...

  6. [Windows Hook] 屏蔽键盘按键

    //该例程为在系统级屏蔽一些系统键.如WIN.TAB.CAP.POWER.SLEEP.HOME等! //屏蔽组合键下面例程不适用!(比如CTRL+ESC需要在钩子函数中用(p.vkCode = VK_ ...

  7. influxDB硬件配置指南

    原地址:https://docs.influxdata.com/influxdb/v1.6/guides/hardware_sizing/ 警告!此页面记录了不再积极开发的InfluxDB的早期版本. ...

  8. WPF Demo13通知项属性+数据绑定(代码层)

    <Window x:Class="BindingDemo1.MainWindow" xmlns="http://schemas.microsoft.com/winf ...

  9. DS图遍历--广度优先搜索

    题目描述 代码框架如下: 输入 第一行输入t,表示有t个测试实例 第二行输入n,表示第1个图有n个结点 第三行起,每行输入邻接矩阵的一行,以此类推输入n行 第i个结点与其他结点如果相连则为1,无连接则 ...

  10. Oracle关于自连接、左外连接、右外连接、全连接

    关于自连接.左外连接.右外连接.全连接:   简单来讲,随便来个例子: A表 B表 id name id name  1 a 1 b  2 b 3 c 4 c   内连接就是左表和右表相同的数据: s ...