[英]Remove div message using CSS animate and jQuery
我使用PHP這樣打印成功消息:
<div class='alert alert-success'>Success!!</div>
我有這個CSS3 Animate:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
現在,我需要使用jQuery在5秒鍾后使用CSS Animate(fadeOutUp)刪除成功消息。 我該如何創建呢?!
您可以創建一個隱藏類,該類將轉換時將不透明度設置為0的元素隱藏起來,並使用JavaScript將此類添加到div中。
的CSS
.hide {
opacity: 0;
transition: opacity 1000ms;
}
JS
function fadeOut(el){
el.classList.add('hide');
}
div = document.getElementById('yourDiv');
setTimeout(function(){
fadeOut(div);
}, 5000);
的HTML
<div id='yourDiv' class='alert alert-success'>Success!!</div>
簽出此codepen 。
這是你想要的?
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}
或將您的.fadeOutUp
CSS更新為
.fadeOutUp {
-webkit-animation: fadeOutUp 5s infinite;
animation: fadeOutUp 5s infinite;
}
那你可以做
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").addClass("fadeOutUp");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.