如何避免Div尺寸变化时背景动画重置？

问题说明 #

我有个带“显示详情”按钮的父div，点击按钮会切换布尔状态，控制详情区域显示/隐藏。父div加了渐变背景动画，但每次点击按钮导致父div尺寸变化时，这个背景动画都会重置，想让动画能持续播放不中断。

React代码 #

import React, { useState, useCallback } from 'react';

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails(prevShowDetails => !prevShowDetails);
    }, []);

    return (
        <div className="mydiv">
            <button onClick={toggleDetails}>
              Show Details
            </button>
            {showDetails && (
              <div>BlaBla</div>
            )}
        </div>
    );
  };

  return (
    <div>
        <PurchaseComponent />
    </div>
  );
}

export default Page;

CSS代码 #

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;

    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    transition: transform 2s ease;
  }
  

  @-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }
  @keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }

问题根源 #

当mydiv因为显示/隐藏详情改变尺寸时，浏览器会重新计算元素布局（重排），这会触发绑定在该元素上的CSS动画从头开始——浏览器默认认为元素状态发生了本质变化，需要重置动画。

解决方法 #

把背景动画转移到父元素的伪元素（比如::before）上，用绝对定位让伪元素脱离文档流，这样父元素尺寸变化时，伪元素的动画不会被打断。具体修改如下：

修改后的CSS #

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    position: relative; /* 给伪元素提供定位参照 */
    overflow: hidden; /* 防止伪元素超出父元素圆角 */
    transition: transform 2s ease;
}

.mydiv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* 把动画层放在内容下面，不遮挡按钮和详情 */
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;
    border-radius: inherit; /* 继承父元素的圆角，保持视觉一致 */
    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    will-change: background-position; /* 提前告诉浏览器这个属性会动，优化性能 */
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
}
@keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
}

为什么这招管用？ #

• 伪元素用绝对定位，尺寸始终跟父元素一致，但不参与父元素的文档流布局，父元素变尺寸时，伪元素只是跟着调整大小，不会触发动画重置。
• z-index: -1保证动画层不会挡住按钮和详情内容，border-radius: inherit让伪元素和父元素圆角匹配，视觉效果和原来完全一样。

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