HTML/CSS-使警报在几秒钟后消失

我发出了一个警报，当按下按钮时弹出，通知用户文本已复制到剪贴板

 <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>

这几乎可以达到目的，但是，它只是将元素设置为不可见。创建警报时，它会将按钮和警报下的任何元素向下移动，当警报“消失”时，它会在按钮应移回的位置留下一个较大的空白

---

有没有办法做到这一点？

添加

display:none

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

动画结束后，以编程方式使用JavaScript的event:，使用

.hide（）

函数正确隐藏元素

比如：

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

---

您可以使用

[class.visible]=“isVisible”

绑定CSS类的存在 以及

setTimeout

功能，在几秒钟后将

isVisible

切换为false

模板

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

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

警觉风格

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

//在angular7中4秒后，成功消息将消失
导出类Unsubscribe组件实现OnInit{
hideSuccessMessage=false；
淡出成功消息（）{
设置超时（（）=>{
this.hideSuccessMessage=true；
}, 4000);
}
component.html-
------------------

您成功
取消订阅此电子邮件服务。

op没有提到jquery，为什么要使用jquery代码和示例？这是完全可以管理的，不需要使用jquery。@chiril.sarajiu这是我所期望的。我只是建议。jquery很棒，但不需要angular:）@PraveenKumarPurushothaman@MuhammedAlbarmawi是的，我知道。这只是一个假想。谢谢。让我们看看。在动画DIR中考虑使用角度。ECTIVE和元数据，而不是使用css，您可以阅读有关它们的内容；我在回答中没有使用角度动画来使其尽可能简单，但切换状态和使用settimeout的想法是相同的，即使您使用角度动画：）@chiril.sarajiu请考虑使警报不移动元素，而是发出警报have

position:absolute

。我发现移动表单元素的动画非常烦人，但这就是我：）。虽然我没有考虑您的整个示例，但我确实在复制方法中添加了setTimeout函数，与动画一起使用。谢谢！

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  {
  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);
}

   // 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>