問題：

　　既需要“顯示、隱藏”’效果，也需要動畫效果。此時使用了xxx.style.display = "none / block" 之后，我們發現 transition 動畫效果就沒有了。

解決辦法一：用定時器（這種方法并不好）

btn2.onclick = function(){xxx.style.display = "block";setTimeout(function(){xxx.style.opacity="1";},0); };

解決辦法二：用 visibility 屬性代替 display?

　　style 屬性的 display 被隱藏的控件不再占用顯示時占用的位置

　　visibility?隱藏的控件僅僅是將控件設置成不可見了，控件仍然占俱原來的位置。 btn2.onclick = function(){let t = document.documentElement.scrollTop;if(t>1){ side.style.visibility="visible";//可見side.style.opacity = "1"; };if(t<=1){side.style.opacity = "0";side.style.visibility="hidden";//不可見 } };

?

轉載于:https://www.cnblogs.com/MrZhujl/p/10355649.html

總結

以上是生活随笔為你收集整理的解决 display 和 transition 冲突的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。