引言

在現(xiàn)代 Web 開發(fā)中，動畫不僅是提升用戶體驗的重要手段，更是增強用戶交互、引導(dǎo)用戶行為、提升界面美感的關(guān)鍵因素。React 本身不直接提供動畫功能，但通過 CSS 的 transition 和第三方動畫庫如 Framer Motion，我們可以輕松實現(xiàn)豐富的動畫效果。

本文將通過兩個例子，講解一下如何在 React 中使用 CSS transition 和 Framer Motion 實現(xiàn)動畫，并對比它們的優(yōu)缺點，幫助我們在項目中做出合適的技術(shù)選型。

一、使用 CSS transition 實現(xiàn)動畫

1.1 示例代碼解析

我們先來看一個簡單的動畫組件，實現(xiàn)一個點擊按鈕后展開/收起的盒子效果。

// Box.jsx
import styles from './box.module.styl';
import { useState } from 'react';

const Box = () => {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <button onClick={() => setOpen(!open)}>
                {open ? 'Close' : 'Open'}
            </button>
            <div className={`${styles.box} ${open ? styles.open : ''}`}></div>
        </div>
    );
};

export default Box;

對應(yīng)的 box.module.styl 文件（使用 Stylus）：

.box
    width: 100px
    height: 0
    background-color: lightblue
    transition: height 0.3s ease
    overflow: hidden

.box.open
    height: 100px

動畫展示：

1.2 工作原理

• .box 初始高度為 0。
• 當點擊按鈕時，open 狀態(tài)改變，組件的類名變?yōu)?.box.open。
• .box.open 的高度變?yōu)?100px，通過 transition 屬性，高度變化會以 0.3 秒的動畫形式完成。

1.3 優(yōu)點與限制

二、使用 Framer Motion 實現(xiàn)動畫

2.1 安裝 Framer Motion

在使用 Framer Motion 之前，需要先安裝它。小編使用的是pnpm，可以使用以下命令安裝：

pnpm install framer-motion

安裝完成后，我們就可以在 React 組件中導(dǎo)入 motion 組件并開始使用它了。

2.2 示例代碼解析

下面是一個使用 Framer Motion 實現(xiàn)的動畫組件，展示點擊按鈕后內(nèi)容從上方向下淡入的動畫效果：

// MotionBox.jsx
import { motion } from 'framer-motion'
import { useState } from 'react'

const MotionBox = () => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? '隱藏內(nèi)容' : '顯示內(nèi)容'}
            </button>
            <motion.div
                initial={{ opacity: 0, y: -50 }}
                animate={{ opacity: isOpen ? 1 : 0, y: isOpen ? 0 : -50 }}
                transition={{ duration: 0.5 }}
                style={{
                    backgroundColor: 'skyblue',
                    padding: 20,
                    marginTop: 10,
                    pointerEvents: 'none' // 防止動畫區(qū)域被誤點
                }}
            >
                <h2>Motion Box</h2>
                <p>這是一個使用 Framer Motion 的動畫組件</p>
            </motion.div>
        </div>
    )
}

export default MotionBox

動畫展示

2.3 工作原理

• initial: 定義組件初始狀態(tài)，如透明度為 0，垂直方向向上偏移 50px。
• animate: 根據(jù) isOpen 狀態(tài)變化定義動畫的目標狀態(tài)。當 isOpen 為 true 時，組件顯示為不透明并回到原位置；為 false 時則隱藏。
• transition: 定義動畫過渡的持續(xù)時間（0.5 秒）和緩動函數(shù)（默認 ease），控制動畫播放的節(jié)奏。
• motion.div: 是 Framer Motion 提供的動畫化組件，自動處理從初始狀態(tài)到目標狀態(tài)的插值與渲染過程。

2.4 優(yōu)點與限制

三、CSS Transition 與 Framer Motion 對比總結(jié)

四、使用選擇建議

• 簡單 UI 動畫（如按鈕懸停、菜單展開）：使用 CSS transition，輕量且易于實現(xiàn)。
• 復(fù)雜交互動畫（如模態(tài)框、頁面切換、拖拽效果）：使用 Framer Motion，其強大的控制能力和豐富的 API 能滿足大多數(shù)復(fù)雜動畫需求。
• 混合使用：可以在項目中同時使用兩者，CSS 負責基礎(chǔ)動畫，F(xiàn)ramer Motion 負責高級動效。

到此這篇關(guān)于React中實現(xiàn)動畫的兩種方式及對比詳解的文章就介紹到這了,更多相關(guān)React實現(xiàn)動畫方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論