解決 display 和 transition 沖突的問題

問題：

　　既需要“顯示、隱藏”’效果，也需要動畫效果。此時使用了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";//不可見
    }
};

?