为何添加带onclick事件的animation后，div的transform属性失效？

1. 变量名错误：JS代码里用了未定义的btnRed变量，实际获取的按钮元素变量是btn，导致点击事件无法正确绑定。
2. 动画样式覆盖：CSS中设置了animation-fill-mode: forwards，会让动画结束后保留最后一帧样式。如果你的roll-out动画包含transform属性，这个动画的transform优先级会高于hover状态的transform，直接导致hover缩放效果失效。
3. CSS语法错误：background-color:"red";里的引号是多余的，会导致背景色不生效。

1. 修正JS变量名：把btnRed.onclick改成btn.onclick，确保点击事件绑定到正确元素上。
2. 提高hover样式优先级：给hover状态的transform添加!important，强制覆盖动画的transform样式。
3. 修复CSS语法错误：移除background-color值的引号。
4. 优化事件绑定：给animationend事件添加{ once: true }选项，避免多次点击重复绑定事件。

HTML #

<body>
    <div id="start">
        <div id="button">PUSH</div>
    </div>

    <div id="div-2">
        <!-- 这个div初始通过CSS隐藏 -->
        内容区域2
    </div>
</body>

CSS #

#div-2 {
    display: none; /* 初始隐藏div-2 */
}

#button{
    width:200px;
    height:200px;
    border-radius: 50%;
    background-color: red; /* 修复引号问题 */
    transition: transform .2s;
    animation: roll-out 3s linear;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

#button:hover{
    transform: scale(1.2) !important; /* 提高优先级 */
}

/* 示例roll-out动画，可根据需求修改 */
@keyframes roll-out {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(300px);
    }
}

JavaScript #

var btn = document.getElementById("button");
var mainContent = document.getElementById("start");
var div2 = document.getElementById("div-2");

btn.onclick = function() {
   btn.style.animationPlayState = "running";
   // 添加once: true确保事件只执行一次
   btn.addEventListener("animationend", function(){
      mainContent.style.display = "none";
      div2.style.display = "flex";   
   }, { once: true });
}

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