最终效果为  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. 为Ubuntu新创建用户创建默认.bashrc并自动加载

    首先,su – 到新创建的用户 拷贝默认的.bashrc过来   1 cp /etc/skel/.bashrc ~/ 然后创建.profile文件   1 vi ~/.profile 粘贴下面的内容 ...

  2. Gradle初识

    一.安装配置 gradle官方网站https://gradle.org/,下载下来是一个压缩包,解压到合适的目录即可,然后配置环境变量(GRADLE_HOME,Path),略去. 二.IDEA配置 N ...

  3. 【重要】将项目发布到Maven中央库

    http://www.ruanyifeng.com/blog/2013/07/gpg.html

  4. Apache shiro如何实现一个账户同一时刻只有一个人登录

    继承AuthorizingRealm类,重写方法doGetAuthenticationInfo /** * 认证(登录时调用) */ @Override protected Authenticatio ...

  5. MyBatis架构与源码分析<资料收集>

    1.架构与源码分析 :https://www.cnblogs.com/luoxn28/p/6417892.html .https://www.cnblogs.com/wangdaijun/p/5296 ...

  6. 【ASP.NET Core】EF Core 模型与数据库的创建

    大家好,欢迎收看由土星卫视直播的大型综艺节目——老周吹逼逼. 今天咱们吹一下 EF Core 有关的话题.先说说模型和数据库是怎么建起来的,说装逼一点,就是我们常说的 “code first”.就是你 ...

  7. uc浏览器视频缓存合并工具

    1.该软件用于将uc浏览器中零散的视频缓存切片处理成完整的视频文件. 开发语言:C#开发工具: Visual Studio 2017 Community 实例图示: 程序代码下载地址 windows ...

  8. vs visual stdio 调试 显示指针为数组

    假如有这样一个指针 int *  idx16  那么要想在调试里面显示为数组并且要显示的数组元素个数为24的话,则要写成idx16,24 如下图

  9. Linux内核剖析(二)Linux内核绪论

    什么是内核 内核是操作系统最基本的部分.它是为众多应用程序提供对计算机硬件的安全访问的一部分软件,这种访问是有限的,并且内核决定一个程序在什么时候对某部分硬件操作多长时间.内核的分类可分为单内核和双内 ...

  10. eclipse工具中使用Data Source Explorer连接数据库(MySQL)

    1.进入Eclipse工具,打开Data Source Explorer.Window==>Show View==>Data Source Explorer(注:如果找不到请选择Other ...