如何在React组件中为CSS关键帧动态传递状态变量？

需求概述 #

需要实现一个CarouselItem轮播组件，满足以下要求：

• 元素根据与轮播中间位置的距离，显示不同的初始透明度
• 鼠标hover时，元素淡化为完全不透明
• 动画关键帧的from阶段透明度需从React组件的状态变量获取，而非固定值0

现有基础动画代码：

.fade {
  animation: fade-in-keyframes 2s;
}
@keyframes fade-in-keyframes {
  from {opacity: 0}
  to {opacity: 1}
}

解决方案 #

1. 利用CSS自定义属性（推荐） #

将组件状态中的初始透明度值绑定到元素的CSS自定义属性上，直接在关键帧中引用该变量：

React组件代码

import React from 'react';

const CarouselItem = ({ initialOpacity }) => {
  return (
    <div 
      className="carousel-item fade"
      style={{ '--initial-opacity': initialOpacity }}
    >
      {/* 轮播内容 */}
    </div>
  );
};

修改后的CSS

.carousel-item {
  /* 基础样式：默认使用初始透明度 */
  opacity: var(--initial-opacity);
}

.fade {
  animation: fade-in-keyframes 2s forwards;
}

@keyframes fade-in-keyframes {
  from { opacity: var(--initial-opacity); }
  to { opacity: 1; }
}

.carousel-item:hover {
  opacity: 1;
  animation: none; /* hover时直接显示完全不透明，停止动画 */
}

注：使用forwards可以让动画结束后保持最终状态，也可根据需求调整。

2. 动态生成关键帧样式标签 #

针对不支持CSS自定义属性的旧环境，可以动态创建包含自定义关键帧的style标签，每个轮播项使用唯一的关键帧名称避免冲突：

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

const CarouselItem = ({ initialOpacity, itemId }) => {
  const styleRef = useRef(null);

  useEffect(() => {
    // 清理旧样式
    if (styleRef.current) {
      styleRef.current.remove();
    }

    // 生成新的关键帧和样式
    const styleEl = document.createElement('style');
    styleEl.textContent = `
      @keyframes fade-${itemId} {
        from { opacity: ${initialOpacity}; }
        to { opacity: 1; }
      }
      .carousel-item-${itemId} {
        opacity: ${initialOpacity};
        animation: fade-${itemId} 2s forwards;
      }
      .carousel-item-${itemId}:hover {
        opacity: 1;
        animation: none;
      }
    `;
    document.head.appendChild(styleEl);
    styleRef.current = styleEl;

    // 组件卸载时清理样式
    return () => styleEl.remove();
  }, [initialOpacity, itemId]);

  return (
    <div className={`carousel-item-${itemId}`}>
      {/* 轮播内容 */}
    </div>
  );
};

3. 使用CSS-in-JS库（如styled-components） #

如果项目已经集成CSS-in-JS工具，可以直接将动态值传入关键帧定义：

import styled, { keyframes } from 'styled-components';

// 动态生成关键帧
const fadeAnimation = (initialOpacity) => keyframes`
  from { opacity: ${initialOpacity}; }
  to { opacity: 1; }
`;

// 定义样式组件
const CarouselItemStyled = styled.div`
  opacity: ${props => props.initialOpacity};
  animation: ${props => fadeAnimation(props.initialOpacity)} 2s forwards;
  
  &:hover {
    opacity: 1;
    animation: none;
  }
`;

// 业务组件
const CarouselItem = ({ initialOpacity }) => {
  return <CarouselItemStyled initialOpacity={initialOpacity}>
    {/* 轮播内容 */}
  </CarouselItemStyled>;
};

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