vue2中使用transition

时间:2022-09-18 09:34:29

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

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

vue2中使用transition

css 样式:

vue2中使用transition

其中:

  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 &period;图片变大&period; 1&rpar;可以使用css中的transition&comma; transform 2&rpar; 预先设置一个 弹出div&period; 3&rpar;弹出层 alert &semi; 4&rpar; 浏览器的宽度document&period;documentElement&period;clientWidth &vert;&vert; document&period;body&period;clientWidth

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

随机推荐

  1. 如何提高账户密码存储的安全性——PasswordSalt的使用

    使用 Salt + Hash 将密码加密后再存储进数据库 如果你需要保存密码(比如网站用户的密码),你要考虑如何保护这些密码数据,象下面那样直接将密码写入数据库中是极不安全的,因为任何可以打开数据库的 ...

  2. windows server 2012 使用问题

    1.端口映射,把宿主机的端口映射到hyper-v创建的虚拟机上 访问宿主机的公网IP的某个端口,就等于访问这个虚拟机上的端口 具体实现: 在宿主机上命令行输入 添加一个端口映射 netsh inter ...

  3. C&plus;&plus; 学习笔记(3) —— 內联函数

    内联函数的用处: 用空间换取时间,在调用时不用每次都写调用的汇编. 什么时候内联: 比较小的函数:只有两三行 在循环里循环调用的函数 什么时候不内联: 比较大的函数,2.30行的 递归的函数

  4. OpenCV函数解读之groupRectangles

    不管新版本的CascadeClassifier,还是老版本的HAAR检测函数cvHaarDetectObjects,都使用了groupRectangles函数进行窗口的组合,其函数原型有以下几个: C ...

  5. MVC的Filters(拦截过滤)的Error页面,支持Ajax报错

    报错拦截过滤到error页面 [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, A ...

  6. C&num;Stimulator项目&gt&semi;&gt&semi;&gt&semi;C&sol;C&plus;&plus; DLL的生成和调用,Windows下的多线程

    Windows下的多线程 http://blog.csdn.net/ganpengjin1/article/category/2541791 使用C/C++建立DLL,环境VS2013 新建Win32 ...

  7. Web Service实例——天气预报

    上述只是模拟了一下服务端和本地端的通信,但是却没有涉及到真正获取其他网站信息的操作.现在我们通过一个案例,是关于获取天气预报,来实际掌握该项技能. 原本可以使用MyEclipse自动生成客户端,然后很 ...

  8. python小工具:用python操作HP的Quality Center

    背景是这样的:这个组的测试人员每跑一个case都要上传测试结果附件到QC.每个待测功能模块可能包含几十上百的case.于是手工上传测试结果变成了繁重的体力劳动.令人惊讶的是我们的工具开发组竟然说做不了 ...

  9. SpringCloud应对高并发的思路

    一.Eureka的高可用性 Eureka下面的服务实例默认每隔30秒会发送一个HTTP心跳给Eureka,来告诉Eureka服务还活着,每个服务实例每隔30秒也会通过HTTP请求向Eureka获取服务 ...

  10. xml字符串,xml对象,数组之间的相互转化

    <?phpnamespace Home\Controller;use Think\Controller;class IndexController extends Controller { pu ...