下载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. BZOJ 2285 [Sdoi2011]保密

    题解: 求比值用分数规划,单个求太慢了套整体二分 然后求二分图最小割 // luogu-judger-enable-o2 #include<iostream> #include<cs ...

  2. Navicat Premium 12.0.18 安装与激活

    Navicat Premium 12.0.18中文版 百度云链接:https://pan.baidu.com/s/1HHOOlQbbWAL-MlI908n4MQ 提取码:k9w6 1.下载好后双击运行 ...

  3. 通过Android的API对Sqlite数据库进行操作

    一.增删改查 增 改 查 删 这是删除之前 删除三条 Dao.java package com.example.databasedemo; import android.content.Content ...

  4. ABP 切换mysql 数据库报错mysqlexception: incorrect string value: ‘\xe7\xae\x80\xe4\xbd\x93…’ for column display name

    刚折腾了ABP框架,为了跨平台,将SQL Server数据库换成了MySQL数据库,ABP框架上支持多语言,中间被字符集折腾的够呛,翻了N个博客,最后终于在StackOverFlow 上找到了最终的解 ...

  5. PL/SQL 连接oracle步骤

    下面就将PL/SQL的配置说明一下. 一.安装Oracle客户端,让后配置    安装目录下面的C:\ORACLE\instantclient_11_2\NETWORK\ADMIN 的 tnsname ...

  6. tfield的字段名和显示名

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. unable to execute /bin/mv: Argument list too long

    四种解决”Argument list too long”参数列表过长的办法 转自 http://hi.baidu.com/cpuramdisk/item/5aa49ce00c0757aecf2d4f2 ...

  8. centos7-vsftp(虚拟用户)

    要求如下: 1.所有用户主目录为/var/www宿主为virtual用户: 2.ftpuser1用户只能下载不能上传以及删除文件重命名操作: 3.ftpuser2可以下载与上传文件以及删除重命名操作: ...

  9. Mybatis实现if trim(四)

    1. 准备 请先完成Mybatis实现增删改查(二)和Mybatis实现条件查询(三)的基本内容 2. 关于多条件查询的疑问 在Mybatis实现条件查询(三)中我们实现了多条件(商品编码.商品名称. ...

  10. Mac中制作USB系统启动盘

    .iso镜像文件转 .dmg文件 hdiutil convert -format UDRW -o linuxmint.dmg ~/Desktop/linuxmint-19-cinnamon-64bit ...