JavaScript如何实现元素移至页角后平滑返回初始位置

• 缺少基础定位设置：元素未设置position: absolute，写在样式上的top、left属性不生效，元素从一开始就停在文档流默认位置
• 缺少过渡配置：没有给元素设置CSS transition属性，所有位置变化都是瞬间跳变，无平滑效果
• 位置存储逻辑错误：数组中存储的是带px单位的字符串，拼接到translate()参数中时格式不匹配，无法被浏览器正确解析
• transform计算逻辑错误：transform: translate()的参数是相对元素原始位置的偏移量，不是目标位置的绝对坐标。之前直接把初始top、left值塞进translate参数，相当于让元素额外偏移一倍初始坐标，无法回到原位
• 代码执行遗漏：实例化类时漏掉了括号，new Square语句不会真正创建元素实例，整个类的逻辑不会被触发

• 初始化时给元素补全绝对定位、平滑过渡的基础样式
• 用独立的纯数值属性存储初始位置的top、left值，避免字符串解析的问题
• 移动到角落的偏移量按照「视口尺寸 - 元素初始位置 - 元素自身尺寸」计算，保证元素最终停在视口右下角
• 返回初始位置时不需要复杂计算：因为元素的top、left从来没有变过，只需要把之前设置的transform偏移量清零，元素就会通过平滑过渡回到最初的位置

class Square {
    constructor() {
        this.c = document.createElement("CANVAS");
        this.c.width = 100;
        this.c.height = 100;
        this.c.getContext("2d").strokeRect(0, 0, 100, 100);
        // 补全基础样式
        Object.assign(this.c.style, {
            position: "absolute",
            transition: "transform 0.8s ease"
        });
        document.body.appendChild(this.c);
        this.initPosition();
        this.move();
    }
    initPosition() {
        // 用纯数值存储初始位置，避免单位带来的解析问题
        this.initTop = Math.random() * (document.body.clientHeight - 100);
        this.initLeft = Math.random() * (document.body.clientWidth - 100);
        this.c.style.top = `${this.initTop}px`;
        this.c.style.left = `${this.initLeft}px`;
    }
    move() {
        // 延迟500ms平滑移动到页面右下角
        setTimeout(() => {
            const moveToCornerX = document.body.clientWidth - this.initLeft - 100;
            const moveToCornerY = document.body.clientHeight - this.initTop - 100;
            this.c.style.transform = `translate(${moveToCornerX}px, ${moveToCornerY}px)`;
        }, 500);
        // 延迟2000ms平滑回到初始位置：直接清零transform偏移即可
        setTimeout(() => {
            this.c.style.transform = `translate(0, 0)`;
        }, 2000);
    }
}
// 补全实例化的括号
for (let i = 0; i < 1; i++) {
    new Square();
}

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