HTML/CSS -使警报在几秒钟后消失
HTML/CSS -使警报在几秒钟后消失
提问于 2018-07-26 03:33:51
我制作了一个警报，当按下按钮时弹出，通知用户文本已复制到剪贴板
<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>该按钮调用填充"message“字符串的方法。
我正在尝试用html或css在几秒钟后删除这个元素。我试着为它创建一个动画
.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;}
}这几乎起到了作用，然而，它只是将元素设置为不可见。当创建警报时，它会将按钮和警报下的任何元素向下移动，当警报“消失”时，它会在按钮应该移动回的位置留下一个很大的空格。
有没有办法做到这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-26 04:07:31
您可以使用[class.visible]="isVisible"绑定CSS类和setTimeout函数的存在，以便在几秒钟后将isVisible切换为false。
模板
<button (click)="showAlert()">show alert</button>
<div class="alert" [class.visible]="isVisible">
JWT copied to clipboard
</div>组件
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);
}Stack Overflow用户
发布于 2018-07-26 03:35:29
还可以添加display: none。
@-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; display: none;}
}在动画结束后，通过编程使用JavaScript的event：Detect the End of CSS Animations and Transitions with JavaScript — Jonathan Suh，使用.hide()函数适当地隐藏元素。
类似于：
$(element).on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function () {
$(this).hide();
});Stack Overflow用户
发布于 2019-06-07 23:23:15
// 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51526421
复制相关文章
相似问题