transition 动画与 display: none 冲突的问题

几种元素消失的属性

• display: none; 元素消失,不占位。
• visibility: hidden; 元素消失,占位。
• opacity: 0;透明度设为0,元素看不见,占位。
• width: 0;宽度设为0 ,元素看不见,不占位。

问题

• transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素
• 可能是transition过渡不支持display的改变，直接操作display会破坏transition的动画

解决方案

• 解决办法一：用定时器（这种方法并不好）

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

• 解决办法二：用 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";//不可见
    }
};