Angular2: How to fade out box-msg after a while which is displayed onClick

问题

Might be a silly question but am new to angular and still learning.

Am showing a success message on button click which I need to fade out after few seconds.

<div *ngIf="hideSharedLinkCopyMessage" class="alert alert-success box-msg " role="alert">
    <strong>Link Generated!</strong> Your sharable link is copied to clipboard.
</div>

Now, am using alert-success and box-msg classes. I tried to add fadeOut class as well but that didn't worked.

hideSharedLinkCopyMessage is set to true when the button in clicked. Initially it is set to false How can I fade this message out after few seconds?

回答1:

Add a timeout function after setting true hideSharedLinkCopyMessage. In the next example the link will fade out after 2 seconds;

FadeOutLink() {
    setTimeout( () => {
          this.hideSharedLinkCopyMessage = false;
        }, 2000);
   }

An other option and politer is to use Angular Materials and import the Snackbar component. Is really easy to use and you can customize it as you want.

回答2:

Normal Fade out will not work with *ngif because with *ngif, the element is directly removed from the DOM.

You need to use ngClass to add/remove a class(fadeout) which will have the fade out effect and then use a timeout to turn your variable hideSharedLinkCopyMessage to true and element will be removed from DOM.

Controller:

<your method to remove alert> () {
    // add class fadeOut here
    setTimeout( () => {
      this.hideSharedLinkCopyMessage = false;
    }, 3000);      
}

回答3:

Success Message will disappear after 4 sec in angular7

  export class UnsubscribeComponent implements OnInit {
  hideSuccessMessage = false;

  FadeOutSuccessMsg() {
    setTimeout( () => {
           this.hideSuccessMessage = true;
        }, 4000);
   }

   component.html -
   ------------------
          <div  *ngIf="!hideSuccessMessage">
            <div class="col-12">
              <p class="alert alert-success">
                  <strong [ngClass] ="FadeOutSuccessMsg()" >You are successfully 
                  unsubscribe from this email service.</strong>                 
              </p>
            </div>
          </div>

来源：https://stackoverflow.com/questions/50267212/angular2-how-to-fade-out-box-msg-after-a-while-which-is-displayed-onclick

标签

javascript

angular

fadeout