在 React 中没有调用 OnTransitionEnd答案

【问题标题】：OnTransitionEnd isn't getting called in React在 React 中没有调用 OnTransitionEnd
【发布时间】：2022-08-20 03:21:39
【问题描述】：

我正在构建一个轮播，我的渲染组件看起来像这样：

<CarouselWrapper>
      <Carousel3D style={rotationStyle} />
</CarouselWrapper>

带造型

export const CarouselWrapper = styled.div`
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 2000px; 

export const Carousel3D = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
`

当我按下箭头键时，我将rotationStyle 更新为我计算出的某个角度的{transform : `rotateY( ${angle}deg)`}。

这工作正常。轮播成功旋转（需要 1 秒）。但是，一旦旋转停止，我想做点什么。我尝试像这样添加onTransitionEnd：

<Carousel3D style={rotationStyle} 
        onTransitionEnd={(ev:any) => handleTransitionEnd(ev)}>

并将处理程序日志记录到控制台：

const handleTransitionEnd = (ev : any) => {
    console.log(\'ended\');
}

但什么都没有显示。我也尝试通过 onTransitionEnd={handleTransitionEnd} 代替。我正在使用功能组件，如果这有助于了解的话。

为什么我的onTransitionEnd 永远不会被调用？

标签： reactjs css-transitions styled-components handler

【解决方案1】：

您的代码看起来不错，但是您没有显示如何处理关键操作。我认为问题就在那里。我复制了您的代码，也许您可以在需要修复的地方找到它。

import { useEffect, useState } from "react";
import styled from "styled-components";

export const CarouselWrapper = styled.div`
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 2000px;
`;

export const Carousel3D = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
`;

export default function App() {
  const [log, setLog] = useState("press left, right arrow key");

  useEffect(() => {
    document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        setLog("key pressed");
      }
    });

    return () => document.removeEventListener("keydown", () => {});
  }, []);

  const handleTransitionEnd = () => {
    setLog("transition ended");
  };
  return (
    <div className="App">
      <CarouselWrapper>
        <Carousel3D
          style={{
            transform: `rotateY(${log === "key pressed" ? "100" : "0"}deg)`
          }}
          onTransitionEnd={handleTransitionEnd}
        />
        {log}
      </CarouselWrapper>
    </div>
  );
}

【讨论】：