Set Angular 6 to begin with a display of none and then have the animation take precedence over the

Creating a unique error tooltip for customization.

In the initial state, the tooltip is styled with the .errorTooltipUnload class:

.errorTooltipUnload {
    animation: tooltipUnload 1s;
    animation-fill-mode: forwards;
    display: none;
}

This animation is used:

@keyframes tooltipUnload {
    0% {
        display: block;
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

When the value of hasError is set to true, it switches to the .errorTooltipLoad class which has the opposite effect of unload.

<div [ngClass]="{'errorTooltipLoad': hasError, 'errorTooltipUnload': !hasError}" id="loadError"></div>

The Issue

Upon setting hasError to false, the div disappears without animation due to the default display: none property.

Removing this property results in the tooltip appearing and disappearing on page load.

Is there a workaround to prevent the display: none from affecting the element after the animation completes?

javascriptcssangular

Answer №1

Update the errorTooltipUnload by removing the display: none; property.

.errorTooltipUnload {
    animation: tooltipUnload 1s;
    animation-fill-mode: forwards;

}


@keyframes tooltipUnload {
    0% {
        display: block;
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}
<div class="errorTooltipUnload" id="loadError">hello</div>

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

Do you need assistance with downloading files and disconnecting from clients?

When looking at the code snippet below: async function (req, res, next) { const fd = await fs.open("myfile.txt") fs.createReadStream(null, { fd, autoClose: false }) .on('error', next) .on('end', () => fs.close(fd)) . ...

javascriptnode.jsexpress

Encountering Angular 2 RC5 Routing Problem when Loading Several Modules

I am having trouble loading a child module within another child module, as shown in the image below: List of modules with routing info When I attempt to load the "Material Module" child module, which has its own routes, within the "Home Module," I encoun ...

angularangular2-routing

Payload content delivery system - GraphQL Error: Names must consist solely of [_a-zA-Z0-9] characters, however, "_9:00" does not meet this criteria

I've encountered a problem with Payload CMS where a GraphQL error related to enum value naming is causing issues. The problem arises with a collection named FormSubmission that includes a field called appointmentTime, which utilizes a select field typ ...

javascriptnext.jsenumsgraphqlpayload-cms

Listening on TCP port for HTML5 Websocket communications

I have a desktop application that is communicating with my asp.net mvc app. The desktop application publishes data on port:10000 which I need to be able to listen to in the browser. Below is the code snippet: <html> <head> <s ...

javascriptgoogle-chromewebsockettcp

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

When using getComputedStyle, it is expected to return the final computed CSS property value. However, for background-color, browsers tend to return "transparent" (or rgba(x,x,x,0)) instead of computing the inherited value from ancestors. The method only s ...

javascriptcssbackground-colorgetcomputedstyle

React checkbox remains checked even after uncheckingIs this revised version

I am currently working on a React application where I display an array of matches as a list of rows. Each row contains two athletes, and users can use checkboxes to predict the winner for each match. Only one athlete per row can be checked. To keep track o ...

javascriptreactjscheckbox

Having trouble navigating back to the homepage

Recently, I started following a tutorial on YouTube to create a basic frontend in React with Bootstrap. However, I encountered a roadblock while trying to implement a specific functionality. The issue stemmed from the fact that react-router-dom v6 no lon ...

javascriptreactjsreact-bootstrap

Pokemon Search Input using React

Looking to add a search bar feature that filters out Pokémon based on user input? Take a look at this code snippet I've been working on: import React, { Component } from "react"; import PokemonCard from "./PokemonCard"; import Loa ...

javascriptreactjssearchinputfilter

Troubleshooting Spotify OAuth2 in React: Issues with State Updating and 'Security Breach Detected' Message

Currently, I am in the process of creating a React application that involves the implementation of Spotify's OAuth2 for user authentication. The OAuth2 flow seems to be functioning correctly, as it redirects users to Spotify and back to my app. Howeve ...

javascriptreactjsspotify

Creating an ngInclude directive on the fly: A step-by-step guide

Whenever I insert this into my HTML, everything functions correctly: <div ng-include="'my-template.html'"></div> However, when attempting to dynamically create that ngInclude directive using jQuery (after the DOM has loaded), it fai ...

javascriptangularjsangularjs-directive

Issue with the scope causing global variable not to update when button is pressed

I am facing an issue with a declared variable and jQuery code that is supposed to store a form's value as the value of that variable when a button is clicked, and then execute a function. var verb = ""; $( "#submit" ).click(function() { verb = $(& ...

javascriptjqueryscope

Is it feasible to simultaneously load multiple directives in AngularJS?

I currently have a UI table with 5 columns, each containing different charts rendered using various directives such as custom progress bars and margin targets. The functionality is operating smoothly at the moment. Issue: When loading the page, it takes a ...

javascriptangularjsperformanceangularjs-directiveparallel-processing

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

htmlcsstwitter-bootstrapbootstrap-4

When I hover over my divs, my span is positioned behind them

Greetings, I apologize for any language barriers. I will do my best to articulate my issue clearly. I have experimented with various approaches and reviewed similar questions, but unfortunately, I am unable to resolve the problem... I have created a title ...

csshover

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

javascriptangularunit-testingjasmineangular-http-interceptors

Retrieve the live value for plugin settings following the completion of DOM loading. (Fineuploader plugin)

I am seeking assistance with a situation. I am utilizing Fineuploader and I need to access and transmit the value of an input field (which will serve as the file group title). To achieve this, I am using the path to a server-side script (as I did not wri ...

javascriptjquerydomjquery-pluginsplugins

Tips for manipulating the size of an image directly within an Angular controller post retrieval from a database

After uploading an image to my database (with dimensions 500*700), I want to ensure that it is always displayed at a fixed size of 300*300. This requirement applies to all images, including those uploaded by users with varying dimensions. ...

javascriptangularjsionic-framework

Leveraging the power of both IntelliJ and AngularCLI 6 to effortlessly import libraries using their package names

My Angular CLI 6 project consists of two components: A library containing services and components A project that utilizes this library When integrating the library into the frontend project, I typically use: import { SomeLibModule } from "some-lib"; H ...

angularintellij-ideaangular-cliwebstormangular-cli-v6

Combining Multiple Arrays into a Single Array

Is there a way to combine this merge operation that creates one array using forEach into a single array at the end? affProd.pipe(mergeMap( event1 => { return fireProd.pipe( map(event2 => { const fi ...

javascriptangular

Displaying a block of three cells requires the removal of any spacing between them

Click here to view the code <table cellspacing="1" width="50%" bgcolor="#cccccc"> <tr class="csstextheader"> <td> </td> <td>Class </td> <td>Numbers </td> </tr& ...

jqueryhtmlcss