vue2中使用transition
最终效果为 div元素从右向左出现, 然后从左向右消失。
transition标签包裹要移动的元素:

css 样式:

其中:
1: 为div元素显示时的状态
2: 为div元素移动的过程
(进入的过程,离开的过程)
(直线运动,运动0.3s)
3: 为div元素移动之前和离开后的转态
(三个参数分别为x,y,z轴,x轴正直在右边,负值在左边,此处为正值,所以元素从右向左进入)
(100%可替换为像素,100%代表div元素的宽度的100%,刚好完全隐藏)
vue2中使用transition的更多相关文章
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- Vue2中实现微信分享支付功能
Vue2中实现微信分享支付功能 近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- css3动画属性中的transition属性
一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...
- 点击图片或者鼠标放上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 ...
随机推荐
- IPAddress.Any 解决本地ip和服务器ip切换问题
IPAddress.Any表示本机ip,换言之,如果服务器绑定此地址,则表示侦听本机所有ip对应的那个端口(本机可能有多个ip或只有一个ip)IPAddress.Any微软给出的解释是:Provide ...
- Linux如何快速跳转到文档开头或者末尾
输入 gg 命令,光标会移动到文档开头 : 输入 G 命令,光标会移动到文档末尾: 另外可以敲击 上下键.Page UP.Page Down 键快速查看文档:
- 浪院长 | spark streaming的使用心得
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/82505159 今天.主要想聊聊spar ...
- [Canvas]空战游戏 已经可以玩了 1.13Playable
空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...
- [dubbo] Dubbo API 笔记——配置参考
schema 配置参考 所有配置项分为三大类 服务发现:表示该配置项用于服务的注册与发现,目的是让消费方找到提供方 服务治理:表示该配置项用于治理服务间的关系,或为开发测试提供便利条件 性能调优:表示 ...
- csproj文件中copy指令的使用方式
实际开发中有很多项目需要引用第三方的dll或者资源文件,且文件比较多,在运行时这些文件需要被拷贝到BIN目录. 使用VS自带的"复制到输出目录",似然方便,但是比较不零活,经过多次 ...
- 安全工具-cansina
Cansina是一款Web内容的发现工具,使用该工具指定详细的web目录内容作为payload即可破探测出web路径等资源. 工具安装操作如下 pip install --user requests[ ...
- java 查看SOAP请求报文
log.info("ESB 请求URL = " + cachedEndpoint.toString());//打印SOAP请求报文 add by LinJC on 20170120 ...
- bat搜集
1. 删除文件夹下指定名称的所有子文件夹 @echo off ::设置要保留的文件夹名,多个文件夹之间用英文逗号隔开,如果包含空格或英文逗号,英文&以及其它一些特殊字符的名字,请把该完整名字用 ...
- hdoj:2069
Coin Change Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...