最终效果为  div元素从右向左出现, 然后从左向右消失。

transition标签包裹要移动的元素:

css 样式:

其中:

  1:  为div元素显示时的状态

  2:  为div元素移动的过程

      (进入的过程,离开的过程)

      (直线运动,运动0.3s)

  3:  为div元素移动之前和离开后的转态

      (三个参数分别为x,y,z轴,x轴正直在右边,负值在左边,此处为正值,所以元素从右向左进入)

      (100%可替换为像素,100%代表div元素的宽度的100%,刚好完全隐藏)

vue2中使用transition的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  3. Vue2中实现微信分享支付功能

    Vue2中实现微信分享支付功能  近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

  6. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  7. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  8. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  9. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

随机推荐

  1. C#修改文件名方法

    static void Main(string[] args) { string srcFileName = @"c:\order.txt"; string destFileNam ...

  2. Nginx之——日志按日期分割的实现(基于CentOS操作系统)

    Nginx自身是没有按日期切割日志的功能,可以用shell脚本实现.新建一个cut_log.sh, #!/bin/sh # Program: # Auto cut nginx log script. ...

  3. SuppressLint错误

    解决方法:找到注解包,添加到项目提示重复,去掉后又可以了,很奇怪,不过可以了. 方法2:把eclipse项目关闭重新打开,错误又消失了.

  4. 使用log4net生成日志文件

    (一)使用log4net生成日志文件   1.引入log4net.dll 1.1 Nuget安装 或 http://logging.apache.org/log4net/下载log4net的源代码,编 ...

  5. golang dlv 远程调试

    因为不知道delvel 是如何设置源码的,本地编译的上传到服务器上,服务器要调试看不到源码,很是忧伤,所以干脆使用远程调试吧: 在服务器上 ps x|grep game 查找到gameserver的进 ...

  6. 一步步教你轻松学支持向量机SVM算法之理论篇1

    一步步教你轻松学支持向量机SVM算法之理论篇1 (白宁超 2018年10月22日10:03:35) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

  7. [svc]证书学习索引

    数字证书基础知识 对称加密/非对称加密细枝末节 openssl对称非对称加密实战 使用OpenSSL实现CA证书的搭建过程 通过openssl生成证书 HTTPS证书生成原理和部署细节 证书各个字段的 ...

  8. Android PopupWindow 仿微信弹出效果

    项目中,我须要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果.这样大家直接拿到项目里就能够用了! 首先让我们先看效果: 那么我首 ...

  9. golang:常量

    今天写代码的时候才发现,go语言里面的常量不能是数组(例如:[2]byte) 于是想查一下资料搞清楚到底是什么原因导致的,从effective go查到如下介绍: 但是这里也仅仅就是介绍了一下常量类型 ...

  10. C# 参数签名字符串按 ASCII码排序,注意其中的坑

    参数签名中通常是按键值对中键名称的ASCII按从小到大的顺序排序后进行hash为签名字符串.不要直接使用 SortedDictionary<string, string> 有坑的,他是按数 ...