HTML/CSS - Make alert disappear after a few seconds

Question

I've made an alert that pops up when a button is pressed notifying the user that text has been copied to the clipboard

 <div class="alert alert-success" *ngIf="message?.length > 0" role="alert">{{ message }}</div>
 <button class="btn btn-default" (click)="copy(token)" role="button">Copy</button>

The button calls a method that populates the "message" string.

I'm trying to find a way with html or css to remove this element after a couple seconds. I've tried creating an animation for it

.alert-success {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}

@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

This almost does the trick, however, it merely sets the element invisible. When the alert is created it moves the button and any elements under the alert down and when the alert "disappears", it leaves a large whitespace where the button should move back to.

Is there a way to do this?

Solution 1

You can use [class.visible]="isVisible" to binds the presence of the CSS class and setTimeout function to toggle isVisible to false after few second.

template

<button (click)="showAlert()">show alert</button>

<div class="alert" [class.visible]="isVisible"> 
  JWT copied to clipboard
</div>

component

export class AppComponent  {

  public isVisible: boolean = false;

  showAlert() : void {
    if (this.isVisible) { // if the alert is visible return
      return;
    } 
    this.isVisible = true;
    setTimeout(()=> this.isVisible = false,2500); // hide the alert after 2.5s
  }

}

alert style

.alert  {
  position: fixed;
  top: 0;
  right: 0.5rem;
  border:1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  padding: 2rem;
  background: #fff;
  color: #f65656;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);
  transition:  all 0.2s ease-in-out;
  opacity: 0;
}

.visible {
  opacity: 1;
  transform: translateY(1.25rem);
}

stackblitz example

Solution 2

Add display: none as well.

@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0; display: none;}
}

And after the animation is over, programmatically using JavaScript's event: Detect the End of CSS Animations and Transitions with JavaScript — Jonathan Suh, properly hide the element using .hide() function.

Something like:

$(element).on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function () {
  $(this).hide();
});

Comments

[k.s.]

consider using angular in animation directives and metadata, rather than using the css ones, you can read here about them;

[Muhammed Albarmavi]

I don't use angular animation in my answer to make it simple as possible but the idea of toggle the state and using settimeout is the same even if you use angular animation :) @chiril.sarajiu

[Heretic Monkey]

Consider making the alert not move elements around, and instead make the alert have position: absolute. I find animations that move my form elements around incredibly annoying, but that's me :).

[k.s.]

op didn't mention jquery, why the jquery code and example? this is perfectly manageable w/o using jquery.

[Praveen Kumar Purushothaman]

@chiril.sarajiu I expected this. I was just suggesting.

[Muhammed Albarmavi]

JQuery is great but not with angular :) @PraveenKumarPurushothaman

[Praveen Kumar Purushothaman]

@MuhammedAlbarmawi Yes, I know. It was just a pseudo idea. Thanks. Let's see.

[Russell Quinlan]

While I didn't take your whole example into account, I did add the setTimeout function in my copy method, in conjunction with the animation. Thanks!