今日做公司的一個展示圖，程序中，有一部分用到了：hover來顯示，
開始呢就直接通過hover來控制display顯示，但自身感覺有點生硬，想著用css3的過渡來做，讓其不在看上去你們生硬 ，
專案是vue搭建的，也是用vue語法來寫，由于業務邏輯繁瑣，以及樣式的問題不太好處理這里就不過多展示，
主要的展示是當滑鼠放在房子上顯示一些按鈕來操作，主要問題：
- 使用opactiy來控制顯示和隱藏，通過transition來實作過渡，但是由于按鈕最少是三個，房子之間的距離里的比較近，導致當你放到當前的下一個房子時，會出現第一個按鈕，原因在于opacity是通過透明度來，而實際的dom的位置還是存在的，只是看見而已，當然這都是通過定位來的，可以用層級（z-index）來解決，但問題又來了，我層級可以通過vue語法來設定zIndex，困難的是，寬度問題，由于離的較近，他們寬度已經重疊了，導致無法實作按鈕的功能操作，但可以過渡，
- 使用display來控制顯示和隱藏，但是這種情況無法實作過渡效果，看上去只能那么生硬了，當時想著用dispaly和opacity結合來做，但緊緊只通過css來控制有無法實作，需要通過js來空時opacity的顯示時間才可以，那么如何通過vue語法控制hover來控制opactiy的顯示時間呢？通過按鈕點擊可以控制顯示和過渡，這里又不屬于那一種情況，
問題就是這樣，希望看見這個問題的伙伴們給個建議和解決方法，在此感謝了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/228843.html
標籤：Html/Css
上一篇：Vue入門常用指令