ReactJS - 動畫事件處理程式

---

---

在 React 中，AnimationEvent 處理程式是響應 Web 應用程式中 CSS 動畫事件的函式。這些事件使我們能夠在動畫生命週期的各個階段執行某些操作，例如動畫開始、重複和結束時。因此，在本教程中，我們將瞭解如何在 React 應用程式中使用 AnimationEvent 處理程式。

如何使用它？

一種用於 CSS 動畫事件的事件處理程式。

<div
   onAnimationStart={e => console.log('onAnimationStart')}
   onAnimationIteration={e => console.log('onAnimationIteration')}
   onAnimationEnd={e => console.log('onAnimationEnd')}
/>

AnimationEvent 處理程式引數

當我們在 React 中建立 AnimationEvent 處理程式時，我們只有一個引數，通常稱為 e（“事件”的縮寫）。此引數是一個 React 事件物件，其中包含有關動畫事件的資訊。此事件物件包含特定於 AnimationEvent 的額外功能，例如 -

現在我們已經介紹了 AnimationEvent 處理程式及其引數，讓我們建立一個基本的 React 應用程式來將我們學到的知識付諸實踐。

示例

示例 - 更改背景顏色

我們將建立一個基本的 React 應用程式，演示 AnimationEvent 處理程式的使用。因此，我們將有一個透過 CSS 動畫更改其背景顏色的框。

App.js

import React from 'react';
import './App.css';

class App extends React.Component {
   handleAnimationStart(e) {
      console.log('Animation started:', e.animationName);
   }   
   handleAnimationEnd(e) {
      console.log('Animation ended:', e.animationName);
   }   
   render() {
      return (
         <div className="box" onAnimationStart={this.handleAnimationStart} onAnimationEnd={this.handleAnimationEnd}>
            CSS Animation Demo
         </div>
      );
   }
}

export default App;

App.css

.box {
   width: 200px;
   height: 200px;
   background-color: red;
   animation: colorChange 3s infinite;
}

@keyframes colorChange {
   0% {
      background-color: red;
   }
   50% {
      background-color: blue;
   }
   100% {
      background-color: red;
   }
}

輸出

在上面的示例中，我們有一個簡單的 React 類元件，其中包含兩個事件處理程式：handleAnimationStart 和 handleAnimationEnd。當動畫開始和結束時，這些處理程式將訊息記錄到控制檯。

當我們開啟瀏覽器的開發者控制檯時，我們將看到通知顯示動畫何時開始和結束，以及動畫的名稱。

示例 - 樣式化動畫

在這個 React 應用程式中，我們將使用 CSS 建立一個樣式化動畫。我們將使用應用於 styled-animation-div 類的滑動動畫 (slide-in)。動畫從元素在視口外部平移開始，並在 5 秒內逐漸將其移動到其原始位置。

App.js

import React from 'react';
import './App.css'; // Import the corresponding CSS file

const App = () => {
   return (
      <div
         onAnimationStart={() => console.log('onAnimationStart')}
         onAnimationIteration={() => console.log('onAnimationIteration')}
         onAnimationEnd={() => console.log('onAnimationEnd')}
         className="styled-animation-div"
         >
         Styled React App with Animation
      </div>
   );
};

export default App;

App.css

.styled-animation-div {
   /* Add desired styles and animations here */
   animation: slide-in 5s ease-in-out;
   color: chocolate;
}

@keyframes slide-in {
   0% {
      transform: translateX(-100%);
   }
   100% {
      transform: translateX(0);
   }
}

輸出

示例 - 淡入應用程式

這是另一個帶有不同動畫的 React 應用程式示例。在這裡，我們將建立 App.js 和 App.css 檔案。該應用程式將使用應用於 fade-in-div 類的淡入動畫 (fade-in)。元素從不透明度為零開始，並在 5 秒內逐漸變得完全不透明。

App.js

 
import React from 'react';
import './App.css'; // Import the corresponding CSS file

const App = () => {
   return (
      <div
         onAnimationStart={() => console.log('onAnimationStart')}
         onAnimationIteration={() => console.log('onAnimationIteration')}
         onAnimationEnd={() => console.log('onAnimationEnd')}
         className="fade-in-div"
         >
         React App with Fade-In Animation
      </div>
   );
};

export default App;

App.css

.fade-in-div {
   opacity: 0;
   animation: fade-in 5s ease-in-out;
   color: rgb(88, 27, 5);
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

輸出

總結

我們已成功使用 AnimationEvent 處理程式和引數構建了一個 React 應用程式。現在可以將此知識應用於管理更復雜的動畫並在我們的線上應用程式中構建有趣的使用者體驗。