ReactJS - TransitionEvent 处理程序

TransitionEvent 处理程序方法类似于计算机程序中的特殊侦探，用于监控网页上事物外观(如颜色或大小)的变化。

假设我们在网站上有一个按钮，单击时颜色会轻易改变。TransitionEvent 处理程序方法可识别颜色变化发生的时间，并可用于在变化完成时执行操作。

简单来说，TransitionEvent 处理程序方法可帮助我们的网站在视觉效果出现时做出反应。

语法

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

参数

e − 这是一个 React 事件对象，我们可以将其与 TransitionEvent 属性一起使用。

TransitionEvent 的类型

有四种主要的过渡事件需要注意 −

Sr.No	类型 &描述
1	transitioncancel 当动画或过渡在完成之前停止或取消时，会发生此事件。
2	transitionend 当动画或过渡成功完成时，会发生此事件。
3	transitionrun 当动画或过渡准备启动但实际上可能尚未开始移动时，会发生此事件。
4	transitionstart 当动画或过渡开始进行更改时，会发生此事件。

属性的TransitionEvent

有一些转换事件属性需要注意 −

Sr.No	属性 &描述
1	elapsedTime 此属性告诉我们自过渡或动画开始以来已经过了多少时间。
2	propertyName 此属性指示在过渡或动画期间发生变化的 CSS 属性的名称。
3	pseudoElement 它有助于识别动画是在元素上还是在使用 CSS 添加的内容上。

示例

示例 − 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...");
      
      // 延迟然后重置过渡状态
      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;