React+BEM开发：如何为BEM类传递动态animationSpeed参数？

针对你用React+BEM开发动画时，需要把动态计算的animationSpeed关联到scroller-container__ticker-tape这个BEM类的需求，推荐两种实用方案：

方案1：使用CSS自定义属性（推荐） #

这种方式既能保持BEM类的静态结构，又能灵活传递动态值，是最适配场景的方案：

步骤1：在React组件中计算并传递CSS变量 #

利用React的style属性给BEM元素注入自定义CSS变量，把计算好的动画时长传递进去。同时结合useRef和useEffect监听容器宽度变化，实时更新变量：

import { useRef, useEffect } from 'react';

const Animation = () => {
  const tickerRef = useRef(null);
  const timePerPixel = 5; // 自定义的每像素耗时

  useEffect(() => {
    const tickerElement = tickerRef.current;
    if (!tickerElement) return;

    // 计算动画时长
    const containerWidth = tickerElement.offsetWidth;
    const messageWidth = tickerElement.querySelector('.scroller-container__message')?.offsetWidth || 0;
    const distance = messageWidth + containerWidth;
    const duration = timePerPixel * distance;

    // 将时长注入为CSS变量
    tickerElement.style.setProperty('--animation-duration', `${duration}ms`);

    // 监听容器宽度变化（适配窗口resize或容器尺寸动态改变）
    const handleResize = () => {
      const newContainerWidth = tickerElement.offsetWidth;
      const newDistance = messageWidth + newContainerWidth;
      const newDuration = timePerPixel * newDistance;
      tickerElement.style.setProperty('--animation-duration', `${newDuration}ms`);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [timePerPixel]);

  return (
    <div className="scroller-container">
      <div ref={tickerRef} className="scroller-container__ticker-tape">
        <div className="scroller-container__message">你的滚动内容</div>
      </div>
    </div>
  );
};

步骤2：在CSS中让BEM类引用变量 #

在样式文件里，给scroller-container__ticker-tape类的动画属性绑定这个自定义变量：

.scroller-container__ticker-tape {
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* 引用动态传递的时长 */
  animation-duration: var(--animation-duration);
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

方案2：动态生成BEM修饰符类（适合离散速度档位） #

如果你的animationSpeed是固定的几个档位（比如快/中/慢），可以通过动态添加BEM修饰符类来实现：

步骤1：在组件中计算档位并生成类名 #

import { useRef, useEffect, useState } from 'react';

const Animation = () => {
  const tickerRef = useRef(null);
  const [speedModifier, setSpeedModifier] = useState('');
  const timePerPixel = 5;

  useEffect(() => {
    const tickerElement = tickerRef.current;
    if (!tickerElement) return;

    const containerWidth = tickerElement.offsetWidth;
    const messageWidth = tickerElement.querySelector('.scroller-container__message')?.offsetWidth || 0;
    const distance = messageWidth + containerWidth;
    const duration = timePerPixel * distance;

    // 根据时长判断档位（示例逻辑，可自定义）
    let modifier = '';
    if (duration < 5000) modifier = '--fast';
    else if (duration < 10000) modifier = '--medium';
    else modifier = '--slow';
    setSpeedModifier(modifier);
  }, [timePerPixel]);

  return (
    <div className="scroller-container">
      <div 
        ref={tickerRef} 
        className={`scroller-container__ticker-tape scroller-container__ticker-tape${speedModifier}`}
      >
        <div className="scroller-container__message">你的滚动内容</div>
      </div>
    </div>
  );
};

步骤2：在CSS中定义对应修饰符的样式 #

.scroller-container__ticker-tape {
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroller-container__ticker-tape--fast {
  animation-duration: 4000ms;
}

.scroller-container__ticker-tape--medium {
  animation-duration: 8000ms;
}

.scroller-container__ticker-tape--slow {
  animation-duration: 12000ms;
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

方案对比 #

• CSS自定义属性：适合连续变化的动态值，无需提前定义所有可能的样式，灵活性高，完全贴合你的动态animationSpeed需求。
• BEM修饰符：仅适合离散的速度档位，样式更静态，维护成本低但扩展性差。

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