js設置transition過渡效果不生效的原因和解決方法

前言

最近遇到一個幾年前的小問題，但當時沒有做記錄，久了就忘記了，以至於卡了好一會兒才恍然大悟，現在做一個記錄，方便日后查看。 

 

問題描述

鼠標滾動到一定距離顯示返回頂部按鈕，點擊返回頂部按鈕或鼠標滾動到頂部后按鈕消失，

然后我想給顯示隱藏的過程增加一個過渡效果，這樣自然平滑一些，但該效果始終未生效

 

css代碼和js代碼如下

.back-btn {
display: none;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 99;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #878787;
box-shadow: 0 0 3px 0 #bfbfbf;
background-color: #fff;
cursor: pointer;
}

window.onscroll = function () {
    let backTop = document.getElementById("backTop"),
        clientHeight = document.documentElement.clientHeight,
        osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
        backTop.style.cssText += 'display: block;transition: all 1s';

    } else {
        backTop.style.cssText += 'display: none;transition: all 1s';
    }
}

 

分析原因

發現是display：none屬性的原因，因為display是狀態屬性，它的改變會導致從一個狀態直接跳到另外一個狀態，所以不存在漸變動畫。

 

 

解決方法

使用opacity來實現。opacity是控制透明度的屬性，當透明度為0時，元素為不可見，

修改然后把上面代碼中的display屬性替換成opacity即可,

 

注：不過opacity：0與display：none不同的是，前者只是眼睛看不見，

但實際元素還是占據了相應位置，后者則元素完全隱藏，不占據任何位置

 

.back-btn {
/* display: none; */
opacity: 0;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 99;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #878787;
box-shadow: 0 0 3px 0 #bfbfbf;
background-color: #fff;
cursor: pointer;
}

window.onscroll = function () {
    let backTop = document.getElementById("backTop"),
        clientHeight = document.documentElement.clientHeight,
        osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
        backTop.style.cssText += 'opacity: 1;transition: all 1s';

    } else {
        backTop.style.cssText += 'opacity: 0;transition: all 1s';
    }
}