解决 display 和 transition 冲突的问题

Posted 2021-02-08 mrzhujl

问题：

　　既需要“显示、隐藏”’效果，也需要动画效果。此时使用了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";//不可见
    }
};