What is the process for showing a button once a typewriter animation has completed?

Is there a way to implement a typewriter effect that types out a text line and then displays a button once the animation is complete?

Here is the CSS code for the typewriter effect:

.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; }
  }

And here is the code for the UserMenu component in TypeScript:

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;

Do you have any suggestions on how to resolve this issue?

Answer №1

I recommend utilizing the onAnimationEnd method.

As stated on MDN:

The animationend event is triggered when a CSS Animation has finished. If the animation stops before completion, such as if the element is taken out of the DOM or the animation is removed from the element, the animationend event will not be triggered.

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

Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values ​​and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below? Below is the function I currently use to update ...

Vue.js - Maintaining input value when model declines updates

I am working on a text input that allows users to enter numbers with a maximum of three digits after the decimal point: <v-text-field type="text" :value="num" @change="changeNum($event)" /> <p>{{ num }}</p> ... export default { data: ...

I'm curious if there is a method in Next.js to dynamically replace all `<a>` tags within nested components in order to prevent full page refreshes

Our client requires the use of a React component library that offers various layout components such as Header/Footer elements and Navigation menus. However, only the href string value can be passed for navigation items, preventing any manipulation during r ...

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

Exploring deeply nested arrays of objects until a specific condition is satisfied

My array is structured in a nested format as shown below. const tree = { "id": 1, "name": "mainOrgName", "children": [ { "id": 10, "name": "East Region", "children": [ ...

Exploring ways to retrieve object properties transmitted through the Vue event global bus

My event bus is responsible for passing the socket.io object back from the main instance to the component where I need specific information, such as the socket id. However, after emitting the related event and receiving the reply in the component, I am una ...

Achieving full width for a List component within a Grid container in React Material UI Grid Item

I am facing a challenge in getting the ListItems to spread across the entire width of the List's div when it is inside a Grid item with xs={12}. Currently, all the ListItems are densely packed on the left side while the list's secondary action bu ...

Error: An issue occurred in the driver.execute_script function causing a JavascriptException. The error message indicates

When attempting to run some JavaScript code on the Chrome driver, I encountered a JavascriptException. Despite my confidence in the correctness of the JS code, the following error message was displayed: raise exception_class(message, screen, stacktrace) s ...

How can I apply Material-ui to all pages in Next.js?

After exploring the example in the next.js repository here: https://github.com/zeit/next.js/tree/v3-beta/examples/with-material-ui I've managed to successfully integrate Material-UI for a single page, but I'm looking for a way to avoid using get ...

Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content. <ul class=&qu ...

Smartphone screen cluttered with overlapping paragraphs

I am encountering a paragraph overlap issue while using a bootstrap template, specifically on smartphones like iPhone 6 with Safari. Interestingly, the problem does not appear when testing on a browser by shrinking the window size to the minimum. On the ph ...

A guide on converting JSON strings into arrays using Javascript

In my JavaScript program, I have a Mocha test that checks if all available currencies are displayed in a drop-down list: it('displays all available currencies in drop down list', () => { return invoiceEditPage.details.currencyDropDown.dr ...

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

Strategies for troubleshooting asynchronous JavaScript with multiple script loading

Typically, I am familiar with setting breakpoints, inspecting variables, and stepping into functions. The file Default.htm contains numerous scripts and empty placeholders. I prefer to proceed through debugging step-by-step. Unfortunately, setting a brea ...

Endless Loop Seamless Vertical JavaScript Experience

I've been working with an HTML table structure of data and was successful in setting up a vertical list loop using some JavaScript. However, I'm facing challenges in achieving a smooth constant vertical scroll. Currently, it goes row by row when ...

Using a navigation bar as a structural component in React

I have a new app in development that features a search bar on every page as part of the layout. When a user conducts a search, the results are displayed and they can click on a result to view more details in a separate component. My main question is regar ...

Is there a way to stop the execution of myFunc after it has been performed 5 times using clearInterval?

This code is designed to notify online shoppers that they need to choose a color from a dropdown menu before adding an item to their shopping cart. If no color is selected, the text will blink to alert them. How can I modify this code so that the blinking ...

Retrieve information and display it in a text field using ajax

Hi there, I'm having some trouble with my current code and would appreciate any help you can offer. My goal is to filter data in a search box and display the corresponding results in text boxes. I've been searching online for hours trying to find ...

Can jQuery help me identify which <input type='image> was clicked within a form containing several submit images?

Consider this hypothetical scenario: <form> <input type="text" name="some_name" value="val" id="some_name"> <input type="image" value="action" alt="Add To Cart" name="add" src="/images/submit.gif"> <input type="image" value="act ...

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...