Как отобразить кнопку после типографского эффекта fini sh?

Question

Я пытаюсь использовать эффект пишущей машинки, чтобы написать текстовую строку, а затем отобразить кнопку после остановки анимации.

стилей. 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 :

Событие animationend вызывается, когда CSS Анимация завершена. Если анимация прерывается до достижения завершения, например, если элемент удален из DOM или анимация удалена из элемента, событие animationend не запускается.

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

Демонстрация