欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue2中使用transition

程序员文章站 2022-10-04 19:02:52
最终效果为 div元素从右向左出现, 然后从左向右消失。 transition标签包裹要移动的元素: css 样式: 其中: 1: 为div元素显示时的状态 2: 为div元素移动的过程 (进入的过程,离开的过程) (直线运动,运动0.3s) 3: 为div元素移动之前和离开后的转态 (三个参数分别 ......

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

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

vue2中使用transition

 

css 样式: 

vue2中使用transition 

 

其中: 

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

  2:  为div元素移动的过程

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

      (直线运动,运动0.3s)

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

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

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