下载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. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

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

  2. Angular表单 (一)表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

  3. C语言中getopt()和getopt_long()函数的用法

    一.参考文章 1.C语言中getopt()和getopt_long()函数的用法 2.linux 中解析命令行参数 (getopt_long用法) 二.调试经验

  4. indy tcpclient tcpServer

    procedure TForm1.FormCreate(Sender: TObject); begin IdTCPServer1.DefaultPort := ; IdTCPServer1.Activ ...

  5. 【数据结构】Hash表简介及leetcode两数之和python实现

    文章目录 Hash表简介 基本思想 建立步骤 问题 Hash表实现 Hash函数构造 冲突处理方法 leetcode两数之和python实现 题目描述 基于Hash思想的实现 Hash表简介 基本思想 ...

  6. SQL基础教程(第2版)第3章 聚合与排序:3-1 对表进行聚合查询

    3-1 对表进行聚合查询 ● 使用聚合函数对表中的列进行计算合计值或者平均值等的汇总操作.● 通常,聚合函数会对NULL以外的对象进行汇总.但是只有COUNT函数例外,使用COUNT(*)可以查出包含 ...

  7. Cisco连接失败问题处理

    连接公司的VPN时软件一直安装不上,试了几种方法,在此总结. 原文链接:http://www.itsystemadmin.com/error-27850-unable-to-manage-networ ...

  8. mqtt+htttp+websocket

    一.介绍 1.参考网址1:WebSocket协议:5分钟从入门到精通 2.参考网址2:WebSocket 教程(阮一峰) 二.应用 1.参考网址1:从 HTTP 到 MQTT:一个移动后端案例概述 2 ...

  9. ImageTag,图片左上侧有一个小标签

    这实现思路其实很简单 需求:1. 图片比原来的<div>大,需要切割图片.2. 图片左上角显示标签 解决思路: 1. 把照片设置成div的backgroundImage,然后用CSS3切割 ...

  10. 一维跳棋(BFS)

    一维跳棋是一种在1×(2N+1) 的棋盘上玩的游戏.一共有N个棋子,其中N 个是黑的,N 个是白的.游戏开始前,N 个白棋子被放在一头,N 个黑棋子被放在另一头,中间的格子空着. 在这个游戏里有两种移 ...