window.onload场景下点击移动元素的transition过渡效果不生效问题

问题原因 #

CSS的transition过渡效果生效的前提是目标属性存在两个明确的可计算的起始值和结束值，你当前代码失效有两个核心问题：

• 你没有给.square的right属性设置初始值，它的默认值是auto，浏览器无法完成从auto到100px的状态过渡，只会直接跳转
• 如果你要实现方块向右移动100px的效果，right: 100px的逻辑是错误的：right表示元素右边缘距离定位父级右边缘的距离，设置为100px时元素实际会向左偏移。

修复方案 #

方案1：使用left属性实现位移（最直观） #

给需要过渡的属性设置明确初始值即可生效：

.square {
    position: absolute;
    background-color: red;
    width: 500px;
    height: 500px;
    transition: 1s;
    /* 添加left的初始值 */
    left: 0;
}

window.onload = function(){
    var square = document.querySelector(".square");        
    square.onclick = function(){
        // left从0变为100px，元素自然向右偏移100px，过渡效果正常触发
        square.style.left = "100px";
    };
};

方案2：使用transform实现位移（性能最优） #

transform属性默认初始值为translateX(0)，不需要额外设置初始值，且位移不会影响其他元素布局，渲染性能更高：

.square {
    position: absolute;
    background-color: red;
    width: 500px;
    height: 500px;
    transition: 1s;
}

window.onload = function(){
    var square = document.querySelector(".square");        
    square.onclick = function(){
        square.style.transform = "translateX(100px)";
    };
};

内容的提问来源于stack exchange，提问作者csmiscool123