下载animate.css
<transition name="v">
<div class="content">需要做动画的内容</div>
</transition> <style>
  .content{
    //也可以有其他的样式
    transition: all 0.4s linear;
  }
  .v-enter-active, .v-leave-active{
    /* 进入时和离开时的状态 */
    transition: all 0.4s linear;
  }
  v-enter, .v-leave-active{
    /* 刚进入和离开的状态 */
    opacity:0;
    transform:translate3D(24px,0,0);
  }
</style>

  

vue2.0学习之动画的更多相关文章

  1. vue2.0学习笔记之路由(二)路由嵌套+动画

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

  2. vue2.0学习笔记之路由(二)路由嵌套

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

  3. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  4. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  5. vue2.0学习教程

    十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 如何在本地运行查看github上的开源项目https://www.jianshu ...

  6. vue2.0 之 过渡动画transtion

    过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...

  7. Vue2.0学习笔记一 :各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  8. vue2.0学习(二)

    1.关于模板渲染,当需要渲染多个元素时可以 <ul> <template v-for="item in items"> <li>{{ item. ...

  9. vue2.0学习小列子

    参考地址:https://segmentfault.com/a/1190000006165434 例1: <template> <div id="app"> ...

随机推荐

  1. 18 12 06 sql 的 基本语句 查询 条件查询 逻辑运算符 模糊查询 范围查询 排序 聚合函数 分组 分页 连接查询 自关联 子查询

    -- 数据的准备 -- 创建一个数据库 create database python_test charset=utf8; -- 使用一个数据库 use python_test; -- 显示使用的当前 ...

  2. delphi 单例模式

    unit Singleton; (* 单例模式适用于辅助类, 一般伴随于单元的生命周期 *) interface uses SysUtils; type TSingleton = class publ ...

  3. ArrayList 和 LinkedList 比较

    是否保证线程安全? ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全. 底层数据结构区别? Arraylist 底层使用的是Object数组:LinkedList 底层 ...

  4. adaboost 基于错误提升分类器

    引自(机器学习实战) 简单概念 Adaboost是一种弱学习算法到强学习算法,这里的弱和强学习算法,指的当然都是分类器,首先我们需要简单介绍几个概念. 1:弱学习器:在二分情况下弱分类器的错误率会低于 ...

  5. Java之创建线程的方式四:使用线程池

    import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.c ...

  6. iOS 内购相关

    iOS 内购相关 下面总结一下过往订阅和内购的项目的代码方面的实现细节和注意事项,特别是掉单方面的处理. 后台的协议.商品ID.银行卡.内购类型.沙盒账号测试人员都由运营或者产品在苹果后台中申请处理. ...

  7. Python 中如何自动导入缺失的库?

    在写 Python 项目的时候,我们可能经常会遇到导入模块失败的错误:ImportError: No module named 'xxx'或者ModuleNotFoundError: No modul ...

  8. php分页代码。

     $result_count=select("hy_news_en",$where,'','','count(1)');     $count=mysql_fetch_array( ...

  9. 单机版solr的搭建

    1.1. Solr的环境 Solr是java开发. 需要安装jdk. 安装环境Linux. 需要安装Tomcat. 1.2. 搭建步骤 第一步:把solr 的压缩包上传到Linux系统 第二步:解压s ...

  10. UML-类图-如何画引用类和集合?

    1.画引用类 引用到了类时,需要画关联线,否则其他基本类型(int.string.date等)不画. 2.画集合 当然,方法1中可加入箭头.对应java代码: public class Sale { ...