gpt4 book ai didi

javascript - 当所有嵌套转换完成时,有没有办法捕获事件

转载 作者:行者123 更新时间:2023-12-03 00:01:31 24 4
gpt4 key购买 nike

我试图弄清楚如何在所有嵌套转换结束时捕获事件。例如,我小时候有一个字符串,将其拆分为单词,然后将每个单词拆分为字符,我尝试为每个字符设置动画。为此,我将每个单词中的所有字符用 <Transition> 包裹起来。 。但是当每个单词中的所有字符都完成过渡动画时,我需要捕获该事件。此刻onExited动画开始后立即触发事件。

在下面的代码中,我需要找到一种方法来设置 this.state.showHeadline当所有 Angular 色都完成动画时为 true。

链接到Codesandbox

import React from "react";
import { render } from "react-dom";
import { Transition, TransitionGroup } from "react-transition-group";
import styled, { css } from "styled-components";

const Content = styled.div`
display: flex;
`;

const Word = styled.span`
margin-right: 0.5em;
&:last-child {
margin-right: 0;
}
`;
const Char = styled.span`
text-align: center;
min-width: 8px;
color: black;
backface-visibility: visible;
transition: opacity 4.5s, filter 2s;
transition-timing-function: ease-in-out;
-webkit-font-smoothing: antialiased;
webkit-text-stroke: 0.45px;
-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);

transform: perspective(1050px) rotateY(0deg) scale(0.9);
display: inline-block;
opacity: 0;

${props =>
props.state &&
((props.state === "entering" &&
css`
opacity: 0;
`) ||
(props.state === "entered" &&
css`
opacity: 1;
`))}
`;

class TextWrapper extends React.Component {
constructor() {
super();
this.state = {
showTitle: false,
showHeadline: false
};
}

setState(state) {
super.setState(state);
}

componentDidMount() {
setTimeout(
this.setState(prevState => {
return {
showTitle: true
};
}),
1000
);
}

render() {
const content = this.props.children.split(" ").map((word, i) => {
const chars = word.split("").map((char, i, charArray) => {
return (
<Transition
in={this.state.showTitle}
timeout={(i + 0.5) * 400}
key={char + i}
>
{state => <Char state={state}>{char}</Char>}
</Transition>
);
});
return (
<Transition key={i} timeout={0}>
<Word>
<TransitionGroup
appear={true}
component={null}
onEntered={console.log("char")}
>
{chars}
</TransitionGroup>
</Word>
</Transition>
);
});

return (
<React.Fragment>
<Content>
<TransitionGroup appear={true} component={null} onExited={null}>
{content}
</TransitionGroup>
</Content>
{this.state.showHeadline && <Content>Hello</Content>}
</React.Fragment>
);
}
}

const App = () => <TextWrapper>Example Text</TextWrapper>;

const root = document.getElementById("app");
if (root) {
render(<App />, root);
}

最佳答案

您不需要redux

由于您的 CSS 正在处理动画计时,因此它们始终会从 Angular 色的 Transition 所处的 state 延迟。因此,您会做几件事:

  1. 确定字符串的长度。
  2. 通过 onEntered 事件处理程序跟踪所有已进入 entered 状态的字符。该处理程序采用一个回调函数来添加到 keysLoaded 状态。
  3. keysLoaded 状态的长度与 stringLength 进行比较。
  4. 如果两者匹配,则会触发 showHeadline 回调函数。

但是...您仍然需要补偿 CSS transition 延迟(这就是为什么 showHeadline 回调函数延迟了3500ms)!

工作示例:

Edit Transition Component

关于javascript - 当所有嵌套转换完成时,有没有办法捕获事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55150298/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com