如何实现元素从屏幕中心到左上角的平滑动画效果？

你的代码无法实现平滑过渡的核心原因是初始状态和选中状态使用了不同的定位属性：

• 初始状态通过top:50% + right:-50% + transform: translate(-50%, -50%)尝试居中（其中right:-50%是错误写法，会导致水平定位偏移）
• 选中状态改用top:0 + left:0定位，transition无法在transform和top/left这类不同属性间产生平滑过渡效果

解决方案：统一定位属性，让transition生效 #

我们需要让初始状态和目标状态使用一致的属性体系，这里选择用position: absolute配合transform控制位置，同时保持尺寸属性的可过渡性。

修改后的完整代码如下：

HTML

<p>Click anywhere</p>
<div class="acoustic"><div class="guitar"></div></div>

JavaScript

const acoustic = document.querySelector('.acoustic');
document.body.addEventListener('click', () => acoustic.classList.toggle('selected'));

CSS

.acoustic {
  background-color: blue;
  height: 100px;
  width: 90vw;
  position: relative; /* 为子元素的absolute定位提供参考容器 */
}

.acoustic .guitar{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 实现水平垂直居中 */
    height: 10vw;
    width: 10vw;
    transition: all 0.3s ease; /* 过渡所有可动画属性 */
    background-color: red;
}

.acoustic.selected .guitar {
    top: 0;
    left: 0;
    transform: translate(0, 0); /* 取消偏移，回到左上角 */
    height: 5vw;
    width: 5vw;
}

关键改动说明 #

1. 给.acoustic添加position: relative，确保子元素的absolute定位以父容器为基准，而非整个文档
2. 将.guitar的position改为absolute，避免父元素布局干扰定位逻辑
3. 用left:50%替代错误的right:-50%，配合transform: translate(-50%, -50%)实现准确的水平垂直居中
4. 选中状态下，通过修改transform的偏移值回到左上角，同时调整尺寸，让transition能平滑过渡这些属性的变化

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