点击时从当前位置触发同一元素多段动画的问题排查

问题原因 #

1. 按钮仅生效一次：给元素添加动画类后未移除，CSS动画默认仅执行一次，重复添加相同类不会触发新动画。
2. 动画不从当前位置开始：每个@keyframes的from未指定，默认使用元素初始的padding-top值，而非当前实际位置。

修复方案 #

改用transition替代animation更适配这种状态切换场景，它会自动从当前属性值过渡到目标值，且支持重复触发。

修改后的CSS

#leftnav {
background-color: #fc638f;
width: 6rem;
height: 35rem;
border-radius: 25px;
text-align: center;
margin-top: 1.5rem;
margin-left: 1.5rem;
position: relative;
}

#container2 {
    position: absolute;
    z-index: 1;
}

.iconsclass {
    margin: 25px;
}

#container {
    width: 150px;
    height: 150px;
    margin-left: 1rem;
}

#buttonsoverlay {
    background-color: red;
    height: 70px;
    width: 5rem;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    margin-top: 1.86rem;
    position: absolute;
}

#alloverlays {
    padding-top: 22.25rem;
    transition: padding-top 0.5s ease; /* 新增过渡效果，替代原有动画 */
}

#topbuttonsoverlay {
    background-color: blue;
    height: 2rem;
    width: 2rem;
    margin-left: 3.15rem;
    --mask: radial-gradient(30px at 0 0,#0000 98%,#000);
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

#bottombuttonsoverlay {
    background-color: black;
    height: 2rem;
    width: 2rem;
    margin-top: 4.1rem;
    margin-left: 3.15rem;
    --mask: radial-gradient(30px at 0 100%,#0000 98%,#000);
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

修改后的JS

// 统一处理移动逻辑，接收目标padding值
function moveOverlay(targetPadding) {
  const menu = document.querySelector('#alloverlays');
  menu.style.paddingTop = targetPadding;
}

// 绑定按钮点击事件
document.getElementById("btn1").addEventListener("click", () => moveOverlay('4.7rem'));
document.getElementById("btn2").addEventListener("click", () => moveOverlay('10.5rem'));
document.getElementById("btn3").addEventListener("click", () => moveOverlay('16.4rem'));
document.getElementById("btn4").addEventListener("click", () => moveOverlay('22.25rem'));

HTML无需修改

保持你原有的HTML结构即可。

说明 #

• 移除了所有动画类和@keyframes，用transition实现平滑过渡，每次点击都会从当前padding-top值开始过渡到目标值。
• 统一了JS逻辑，减少重复代码，每次点击直接设置目标属性，无需操作类名，避免了类残留导致的动画无法重复触发问题。

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