ReactJS - 過渡事件處理程式

---

---

TransitionEvent 處理程式方法類似於計算機程式中的特殊偵探，它監控網頁上事物外觀變化（例如顏色或大小）。

假設我們在網站上有一個按鈕，當我們點選它時，它會輕鬆地改變顏色。TransitionEvent 處理程式方法識別何時發生顏色變化，並且可以在變化完成後用於執行操作。

簡單來說，TransitionEvent 處理程式方法幫助我們的網站在視覺效果時做出反應。

語法

<div
   onTransitionEnd={e => console.log('onTransitionEnd')}
/>

引數

e − 這是一個 React 事件物件，我們可以使用 TransitionEvent 屬性。

TransitionEvent 型別

需要注意四種主要的過渡事件型別 -

TransitionEvent 屬性

需要注意一些過渡事件屬性 -

示例

示例 - CSS 過渡應用

為了展示 TransitionEvent 處理程式方法的概念，我們可以建立一個更改 CSS 過渡並使用 transitionend 事件識別過渡何時完成的元件。因此，我們將建立一個按鈕，該按鈕透過過渡更改其背景顏色，並在過渡結束時顯示一條訊息。程式碼如下 -

import React, { useState } from "react";

function App() {
   const [isTransition, setTransition] = useState(false);
   const [message, setMessage] = useState("");   
   const handleButtonClick = () => {
      setTransition(true);
      setMessage("Transition...");
      
      //  delay and then reset the transition state
      setTimeout(() => {
         setTransition(false);
         setMessage("Transition Complete");
      }, 1000);
   };   
   return (
      <div className="App">
         <button
            className={`transition-button ${
               isTransition ? "Transition" : ""
            }`}
            onClick={handleButtonClick}
         >
            Click me to start the transition
         </button>
         <div className="message">{message}</div>
      </div>
   );
}

export default App;

輸出

此示例使用響應按鈕點選的基本過渡以及 TransitionEvent 概念。當我們點選按鈕時，過渡開始，並且訊息將告知我們何時完成。

示例 - 使用 TransitionEvent 的簡單動畫

此應用顯示了 div 元素在點選時的不透明度並記錄過渡持續時間。當我們點選“動畫”按鈕時，div 的不透明度將簡單地在 1 秒內從 1（完全不透明）更改為 0（完全透明）。onTransitionEnd 處理程式記錄過渡完成所需的時間。

import React, { useState } from "react";

function App() {
   const [isAnimating, setIsAnimating] = useState(false);   
   const handleClick = () => {
      setIsAnimating(true);
   };   
   const handleTransitionEnd = (e) => {
      console.log(`Transition completed: ${e.elapsedTime} seconds`);
      setIsAnimating(false);
   };   
   return (
      <div>
         <button onClick={handleClick}>Animate</button>
         <div
            style={{ opacity: isAnimating ? 0 : 1 }}
            transition="opacity 1s ease"
            onTransitionEnd={handleTransitionEnd}
         >
            Click me to animate!
         </div>
      </div>
   );
}

export default App;

輸出

示例 - 帶有展開和摺疊動畫的手風琴

此應用顯示一個手風琴，其中包含在點選時展開和摺疊的內容面板。點選面板標題會將其內容在 0.5 秒內平滑地展開或摺疊。onTransitionEnd 處理程式函式記錄完成過渡的面板的標題。

import React, { useState } from "react";

const panels = [
   { title: "Panel 1", content: "This is the content of panel 1." },
   { title: "Panel 2", content: "This is the content of panel 2." },
   { title: "Panel 3", content: "This is the content of panel 3." },
];
function App() {
   const [activePanelIndex, setActivePanelIndex] = useState(null);   
   const handleClick = (index) => {
      setActivePanelIndex(index === activePanelIndex ? null : index);
   };   
   const handleTransitionEnd = (e) => {
      console.log(
         `Panel transitioned: ${e.target.parentNode.querySelector(".panel-title").textContent}`
      );
   };   
   return (
      <div>
         {panels.map((panel, index) => (
            <div key={index} className="panel">
               <h3
                  className="panel-title"
                  onClick={() => handleClick(index)}
               >
                  {panel.title}
               </h3>
               <div
                  className="panel-content"
                  style={{ maxHeight: activePanelIndex === index ? "500px" : "0" }}
                  transition="max-height 0.5s ease"
                  onTransitionEnd={handleTransitionEnd}
               >
                  {panel.content}
               </div>
            </div>
         ))}
      </div>
   );
}

export default App;

輸出

總結

TransitionEvent 處理程式函式是用於識別和響應網頁上過渡或動畫的 Web 開發工具。它就像一個觀察者，可以對某些 CSS 過渡事件做出反應。

這些方法允許開發人員向這些過渡事件新增自定義操作或響應，從而允許開發人員建立互動式和動態 Web 應用程式。