React实现网站影视板块非淡入入场动画及卡片平滑展开过渡求助

一、非淡入入场动画（替代传统淡入） #

放弃单纯的opacity淡入，改用transform结合transition实现位移+缩放的入场效果——这类属性属于GPU加速范畴，不会触发页面重排，流畅度远高于宽高过渡。

示例代码：

import { useState, useEffect } from 'react';

const MovieCard = ({ movie }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    // 组件挂载后触发动画
    setIsMounted(true);
  }, []);

  return (
    <div className={`card ${isMounted ? 'mounted' : ''}`}>
      <img src={movie.poster} alt={movie.title} className="card-img" />
      <h3>{movie.title}</h3>
    </div>
  );
};

对应的CSS：

.card {
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  /* 优先过渡transform，保证流畅度 */
  transition: transform 0.4s ease-out, opacity 0.3s ease-out;
}

.card.mounted {
  transform: translateY(0) scale(1);
  opacity: 1;
}

• 这里用垂直位移+轻微缩放组合实现非淡入的入场效果，视觉上比单纯淡入更有层次感。
• 组件挂载后通过类名切换触发动画，避免初始渲染时的闪烁。

二、卡片点击平滑展开过渡 #

直接过渡width/height会频繁触发页面重排，导致卡顿，推荐两种更流畅的实现方案：

方案1：max-height配合内部元素过渡 #

用max-height替代height做过渡，同时给展开内容添加延迟动画，让过渡更自然：

const [isExpanded, setIsExpanded] = useState(false);

return (
  <div 
    className={`card-container ${isExpanded ? 'expanded' : ''}`}
    onClick={() => setIsExpanded(!isExpanded)}
  >
    <div className="card-header">
      <img src={movie.poster} alt={movie.title} className="card-img" />
      <h3>{movie.title}</h3>
    </div>
    <div className="card-expanded-content">
      <p>{movie.description}</p>
      <p>上映时间：{movie.releaseDate}</p>
    </div>
  </div>
);

对应的CSS：

.card-container {
  overflow: hidden;
  max-height: 320px; /* 默认卡片的高度 */
  transition: max-height 0.5s ease;
  cursor: pointer;
}

.card-container.expanded {
  max-height: 800px; /* 设为足够容纳展开内容的最大值 */
}

.card-expanded-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.card-container.expanded .card-expanded-content {
  opacity: 1;
  transform: translateY(0);
}

方案2：transform缩放配合绝对定位 #

如果卡片展开后不需要改变页面布局，用transform的scaleY实现纯GPU加速的展开动画：

.card-container {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
  transform-origin: top center; /* 从顶部中心开始缩放 */
}

.card-container.expanded {
  transform: scaleY(1.6); /* 根据内容高度调整缩放比例 */
}

.card-expanded-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

.card-container.expanded .card-expanded-content {
  opacity: 1;
}

• 这种方案完全由GPU处理动画，不会触发任何页面重排，流畅度拉满。

三、图片显示优化 #

1. 保证图片比例正确，避免拉伸：

.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover; /* 裁剪图片适配容器，保持比例 */
}

2. 添加图片加载过渡，避免突然出现：

const [imgLoaded, setImgLoaded] = useState(false);

return (
  <img 
    src={movie.poster} 
    alt={movie.title}
    onLoad={() => setImgLoaded(true)}
    className={`card-img ${imgLoaded ? 'loaded' : ''}`}
  />
);

对应的CSS：

.card-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-img.loaded {
  opacity: 1;
}

核心优化原则 #

• 优先使用transform和opacity做动画，这两个属性是CSS中性能最优的可动画属性，GPU直接渲染，不触发页面重排。
• 避免过渡width/height、margin、padding等会触发重排的属性，改用max-width/max-height或transform替代。
• 动画时长控制在0.3-0.5s之间，平衡自然感和响应速度。

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