最终效果为  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. JavaScript常用,继承,原生JavaScript实现classList

    原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 C ...

  2. ABAP表抛FTP通用程序

    主要功能: 1.支持R3所有表(标准.自建)下传,下传方式为FTP 2.支持输出字段选择及顺序调整 3.支持动态条件,不同的表会有不同的选择条件,根据不同的条件选择需要下传的数据 4.支持单表.多表. ...

  3. mysql 让id字段 以1000 形式开头

    eg: alter table t_location AUTO_INCREMENT=1000;

  4. 每天一个linux命令(5):rmdir

    1.命令简介 rmdir (Remove Directory删除目录): 用来删除空目录,删除某目录时也必须具有对父目录的写权限. 2.用法 用法:rmdir [选项]... 目录... 3.选项 - ...

  5. 【PMP】组织结构类型

    1.简单型 描述:人员并肩工作,所有者/经营者直接做出主要决定并监督执行. PM角色:兼职(协调员) PM权限:极少(无) 项目管理人员:极少(无) 资源可用性:极少(无) 项目预算管理人:负责人 2 ...

  6. 机械臂运动学逆解(Analytical solution)

    计算机器人运动学逆解首先要考虑可解性(solvability),即考虑无解.多解等情况.在机器人工作空间外的目标点显然是无解的.对于多解的情况从下面的例子可以看出平面二杆机械臂(两个关节可以360°旋 ...

  7. Android RecyclerView的item大小保持四个半

        现在有这么一个需求,实现下图的UI.  我想你应该能想到用RecyclerView实现, 当我唰唰唰几分钟做完之后,UI设计师跟我说,每个item,无论在什么手机上,都要显示四个半,具体看下图 ...

  8. maven仓库中心mirrors配置多个下载中心(执行最快的镜像)

    E:\Program FilesApache Software Foundationapache-maven-3.5.4-binconf\settings.xmlmaven仓库中心mirrors配置多 ...

  9. grokking deep learning

    https://www.manning.com/books/grokking-deep-learning?a_aid=grokkingdl&a_bid=32715258

  10. fiddler抓包url有乱码

    fiddler抓包url有乱码: 解决具体步骤: 注册表:regedit   HKEY_CURRENT_USER\Software\Microsoft\Fiddler2 1.打开注册表,regedit ...