如何在React项目中使用Carbon Design Motion实现组件过渡动画？

核心思路 #

Carbon Design Motion提供了预设的**缓动函数（easings）和动画时长（motion）**配置，我们可以结合React状态管理，通过CSS过渡属性实现组件的淡入淡出效果。

实现方式一：Inline Style 动态绑定 #

直接在React组件中利用状态切换，结合Carbon的配置生成过渡样式：

import React, { useState } from 'react';
import { Button } from 'carbon-components-react';
import { easings, motion } from '@carbon/motion';

const AnimatedButtonDemo = () => {
  // 控制按钮显示/隐藏的状态
  const [isButtonVisible, setIsButtonVisible] = useState(false);

  const toggleButton = () => {
    setIsButtonVisible(!isButtonVisible);
  };

  // 基于Carbon Motion配置构建动画样式
  const animatedButtonStyle = {
    opacity: isButtonVisible ? 1 : 0,
    transform: isButtonVisible ? 'translateY(0)' : 'translateY(12px)',
    // 组合过渡属性、时长、缓动曲线
    transition: `opacity ${motion.moderate}ms ${easings.standard}, transform ${motion.moderate}ms ${easings.standard}`,
  };

  return (
    <div style={{ padding: '2rem' }}>
      <Button onClick={toggleButton}>
        {isButtonVisible ? '隐藏动画按钮' : '显示动画按钮'}
      </Button>
      <div style={{ marginTop: '1.5rem' }}>
        <Button
          style={animatedButtonStyle}
          variant="primary"
        >
          带淡入淡出的按钮
        </Button>
      </div>
    </div>
  );
};

export default AnimatedButtonDemo;

关键配置说明：

• motion.moderate：Carbon预设的中等动画时长（默认300ms），还有fast（150ms）、slow（400ms）等选项可选
• easings.standard：Carbon标准缓动曲线，让动画过渡更自然，针对入场/退场场景还有easings.entrance、easings.exit可选

实现方式二：CSS类结合CSS变量 #

Carbon Motion会自动注入全局CSS变量，我们可以在CSS中直接使用这些变量来定义动画类：

/* 基础隐藏状态样式 */
.fade-button {
  opacity: 0;
  transform: translateY(12px);
  transition: 
    opacity var(--cds-motion-duration-moderate) var(--cds-motion-easing-standard),
    transform var(--cds-motion-duration-moderate) var(--cds-motion-easing-standard);
}

/* 显示状态样式 */
.fade-button.visible {
  opacity: 1;
  transform: translateY(0);
}

然后在React组件中动态切换类名：

import React, { useState } from 'react';
import { Button } from 'carbon-components-react';
import './AnimatedButton.css';

const AnimatedButtonDemo = () => {
  const [isButtonVisible, setIsButtonVisible] = useState(false);

  const toggleButton = () => {
    setIsButtonVisible(!isButtonVisible);
  };

  return (
    <div style={{ padding: '2rem' }}>
      <Button onClick={toggleButton}>
        {isButtonVisible ? '隐藏动画按钮' : '显示动画按钮'}
      </Button>
      <div style={{ marginTop: '1.5rem' }}>
        <Button
          className={`fade-button ${isButtonVisible ? 'visible' : ''}`}
          variant="primary"
        >
          带淡入淡出的按钮
        </Button>
      </div>
    </div>
  );
};

export default AnimatedButtonDemo;

这种方式更适合复杂动画或需要复用动画样式的场景。

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