过渡问题，opacity与dispaly的使用

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

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

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

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

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

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