如何在打字机效果完成后显示按钮？

Question

我试图使用打字机效果，以便编写一个文本行，然后在动画停止时显示一个按钮。

styles.css：

.welcome-msg {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }


  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }

UserMenu.tsx：

import React from "react";
import { useHistory } from "react-router-dom";
import AppBar from "../../common/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import './styles.css';
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";


const UserMenu = () => {
  const history = useHistory();
  const handleLogout = () => {
    history.push('/')
  }
  return (
    <div>
      <CssBaseline />
      <AppBar label="user" handleLogout={handleLogout} />
      <Grid container direction="column" alignItems="center" justify="center" style={{ height: "50vh" }}>
        <Grid item>
          <h1 className="welcome-msg">Welcome to user homepage</h1>
        </Grid>
        <Grid item>
          <Button variant="contained" color="secondary">Create</Button>
        </Grid>
      </Grid>
    </div>
  )
}
export default UserMenu;

我怎么才能解决呢？

Answer 1

我建议使用onAnimationEnd。

来自MDN

动画结束事件是在CSS动画完成后触发的。如果动画在达到完成之前中止，比如元素从DOM中删除，或者动画从元素中删除，则动画结束事件不会被触发。

 <h1
   onAnimationEnd={handleAnimationEnd) 
  className="welcome-msg">Welcome to user homepage
</h1>

演示