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';
    }
}

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点