过渡问题,opacity与dispaly的使用

  • A+
所属分类:Web前端
摘要

今日做公司的一个展示图,过程中,有一部分用到了:hover来显示。开始呢就直接通过hover来控制display显示,但自身感觉有点生硬,想着用css3的过渡来做,让其不在看上去你们生硬 。

今日做公司的一个展示图,过程中,有一部分用到了:hover来显示。

开始呢就直接通过hover来控制display显示,但自身感觉有点生硬,想着用css3的过渡来做,让其不在看上去你们生硬 。

项目是vue搭建的,也是用vue语法来写,由于业务逻辑繁琐,以及样式的问题不太好处理这里就不过多展示。

过渡问题,opacity与dispaly的使用

主要的展示是当鼠标放在房子上显示一些按钮来操作。主要问题:

  1. 使用opactiy来控制显示和隐藏,通过transition来实现过渡。但是由于按钮最少是三个,房子之间的距离里的比较近。导致当你放到当前的下一个房子时,会出现第一个按钮,原因在于opacity是通过透明度来,而实际的dom的位置还是存在的,只是看见而已。当然这都是通过定位来的,可以用层级(z-index)来解决,但问题又来了,我层级可以通过vue语法来设定zIndex,困难的是,宽度问题,由于离的较近,他们宽度已经重叠了。导致无法实现按钮的功能操作,但可以过渡。
  2. 使用display来控制显示和隐藏,但是这种情况无法实现过渡效果,看上去只能那么生硬了。当时想着用dispaly和opacity结合来做,但紧紧只通过css来控制有无法实现,需要通过js来空时opacity的显示时间才可以。那么如何通过vue语法控制hover来控制opactiy的显示时间呢?通过按钮点击可以控制显示和过渡,这里又不属于那一种情况。

问题就是这样,希望看见这个问题的伙伴们给个建议和解决方法,在此感谢了。