1、VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定)

动画是通过在某一时间段来添加样式决定的。

要通过 transition进行包裹。

2、在VUE中使用 animate.css库

（1）不用name的另外一种写法

（2）使用animate.css库( 库名+动画名   ---@keyframes类型的 )

第一次刷新的时候页面就出现动画效果

（3）在VUE中同时使用过渡和动画

type="transition" 就是按照 transition的动画时间来计数。

第一次就有动画：appear 、 appear-~

自己定义时间：  :duration="20000" 或者复杂点的 :duration="{enter:5000,leave:10000}"

3、在VUE中的JS动画与Velocity.js

（1）根据js钩子来实现  @before-enter  对应的就是  @before-leave  ~~~   done（）很重要

（2）Velocity.js的使用

4、Vue中多个元素或组建的过渡  dom会复用，给每个添加一个key值就可以了

先进来在隐藏的效果

5、VUE中列表过渡

6、VUE中动画的封装

VUE.js入门学习（4）-动画特效的更多相关文章

  1. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  2. vue.js 入门学习

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

  3. VUE.js入门学习（2）-基础精讲

    1.VUE 实例 - 一个项目是有很多的vue实例拼装的.每一个组建就是vue的实例. var vm = new Vue() 2.VUE 实例生命周期钩子 生命周期函数:VUE实例在某一个时间点会自动 ...

  4. vue.js入门学习

    可以用淘宝npm镜像 然后安装 然后初始化项目: Watch就是一个监听 v-if是如果为false就根本不在页面存在这个元素 v-show是通过display:none来控制这个元素的显示和隐藏 r ...

  5. VUE.js入门学习（3）-深入理解VUE组建

    1.使用组件的细节点 (1)is="模版名" (2)在子组建定义data的时候,data必须是一个函数,而不能是一个对象,每个子组建都有自己的数据存储.之间不会相互影响. (3)操 ...

  6. VUE.js入门学习（1）-起步

    1.hello world <div id="app">{{content}}</div>var app = new Vue({ el:'#app', da ...

  7. VUE.js入门学习（5）- 插槽和作用域插槽

    插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...

  8. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  9. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

随机推荐

  1. node批量修改文件名称

    let fs = require('fs');//引用文件系统模块 let PATH = `./app_zijietiaodong/`;//当前文件夹 let ext = { readFileList ...

  2. app1----攻防世界

    啥也不说把题目下载下来,在模拟器里运行一下 输入正确的key就是flag 继续下一步分析,可以使用Androidkiller分析,我喜欢使用jeb这里我就使用jeb进行分析 找到MainActivit ...

  3. 基于RabbitMQ的MQTT协议及应用

    MQTT的开源代码地址先贴在这里:https://github.com/mqtt/mqtt.github.io/wiki/servers MQTT定义: MQTT(Message Queuing Te ...

  4. 机器学习（ML）八之正向传播、反向传播和计算图，及数值稳定性和模型初始化

    正向传播 正向传播的计算图 通常绘制计算图来可视化运算符和变量在计算中的依赖关系.下图绘制了本节中样例模型正向传播的计算图,其中左下角是输入,右上角是输出.可以看到,图中箭头方向大多是向右和向上,其中 ...

  5. JVM：Java 类的加载机制

    虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验,转换,解析和初始化,最终形成可以被虚拟机直接使用的 Java 类型,这就是虚拟机的类加载机制. 类的生命周期 类从被加载到虚拟机内 ...

  6. python进阶 廖雪峰（慕课网）

    1.函数式编程 变量名可以指向函数,那么函数就可以通过一个变量传递给另一个函数或者变量. map()函数:接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到 ...

  7. 解析基于keras深度学习框架下yolov3的算法

    一．前言 由于前一段时间以及实现了基于keras深度学习框架下yolov3的算法,本来想趁着余热将自己的心得体会进行总结,但由于前几天有点事就没有完成计划,现在趁午休时间整理一下. 二．Keras框架 ...

  8. 十、Vue：Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

  9. FC 与 FB 与 OB 的区别，时间标记冲突与一致性检查 有详细的步骤

    关键字1 组织块的程序是由用户自己编写. 关键字2 时间标记冲突与一致性检查 有详细的步骤. 关键字3 FC 与 FB 与 OB 的区别?   (一)功能 功能块 区别 ? FB 和FC均为 用户编写 ...

  10. P1048 数字加密

    P1048 数字加密 转跳点: