巧妙运用 React 过渡动画，让页面切换流畅生动

2023-10-17 04:56:48

在日常开发中，页面切换时的转场动画是比较基础的一个场景。当一个组件在显示与消失过程中存在过渡动画，可以很好地增加用户的体验。在 React 中实现过渡动画效果会有很多种选择，如 react-transition-group、framer-motion、react-spring 等。本文将主要介绍如何使用 CSS 过渡和 JS 动画实现过渡动画。

使用 CSS 过渡

CSS 过渡是一种使用 CSS 规则在元素之间创建平滑过渡的简单方法。它允许您在元素从一种状态过渡到另一种状态时指定动画效果。要使用 CSS 过渡，需要使用 transition 属性，并指定动画的持续时间、延迟和缓动函数。

例如，以下 CSS 代码为一个元素添加了 fade-in 过渡动画：

.fade-in {
  transition: opacity 1s ease-in-out;
}

当元素的 opacity 属性从 0 更改为 1 时，就会触发此过渡，并在 1 秒内执行渐入动画。

使用 JS 动画

除了 CSS 过渡，您还可以使用 JavaScript (JS) 来创建更复杂的动画效果。使用 JS 动画可以对元素进行更精细的控制，并创建更动态的过渡效果。要使用 JS 动画，可以使用 JavaScript API，如 requestAnimationFrame 和 TweenMax 等。

例如，以下 JS 代码使用 requestAnimationFrame 为元素添加了一个简单的 fade-in 动画：

const element = document.getElementById("element");

const fadeAnimation = () => {
  if (!element) return;

  requestAnimationFrame(fadeAnimation);

  let opacity = parseFloat(element.style.opacity) || 0;
  if (opacity < 1) {
    opacity += 0.01;
    element.style.opacity = opacity;
  }
};

fadeAnimation();

当调用 fadeAnimation 函数时，它会使用 requestAnimationFrame 在每次浏览器重绘时执行动画。它会逐渐增加元素的不透明度，直到达到 1。

使用 React 过渡库

React 还提供了一些过渡库，可以帮助您轻松实现过渡动画。其中最流行的库是 react-transition-group。react-transition-group 提供了一组组件，可以简化过渡动画的实现。这些组件包括 Transition、CSSTransition 和 Spring。

例如，以下代码使用 CSSTransition 组件为一个组件添加了 fade-in 过渡动画：

import { CSSTransition } from "react-transition-group";

const FadeIn = () => (
  <CSSTransition
    in={true}
    timeout={1000}
    classNames="fade-in"
  >
    <div>Hello world!</div>
  </CSSTransition>
);