js设置transition过渡效果不⽣效的原因和解决⽅法前⾔
最近遇到⼀个⼏年前的⼩问题，但当时没有做记录，久了就忘记了，以⾄于卡了好⼀会⼉才恍然⼤悟，现在做⼀个记录，⽅便⽇后查看。
问题描述
⿏标滚动到⼀定距离显⽰返回顶部按钮，点击返回顶部按钮或⿏标滚动到顶部后按钮消失，
然后我想给显⽰隐藏的过程增加⼀个过渡效果，这样⾃然平滑⼀些，但该效果始终未⽣效
css代码和js代码如下
.back-btn {
display: none;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 99;
代码运行js特效width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #878787;
box-shadow: 0 0 3px 0 #bfbfbf;
background-color: #fff;
cursor: pointer;
}
let backTop = ElementById("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;
}
let backTop = ElementById("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';    }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。