7
好吧，我有一種情況，我已經基本建立了一個小通知下拉框，當用戶做了一些事情時，最終轉換到opacity: 0;狀態。從元素中刪除類而不影響正在進行的css轉換
但是，因爲用戶可能點擊其他的東西，將再次觸發此通知框我試圖想出一種方法來重置它恢復正常，而不影響任何正在進行的轉換並嘗試保持動畫完成CSS而不是JavaScript。
CodePen：http://codepen.io/gutterboy/pen/WoEydg
HTML：
<a href="#">Open Notify Window</a>
<div id="top_notify" class="top-notify">
<div class="container-fluid">
<div class="row">
<div class="content col-xs-12">
<div class="alert" role="alert"></div>
</div>
</div>
</div>
</div>
SCSS：
body {
text-align: center;
padding-top: 150px;
}
.top-notify {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
.content {
text-align: center;
background-color: transparent;
transform-style: preserve-3d;
}
.alert {
display: inline-block;
transform: translateY(-100%);
min-width: 250px;
max-width: 500px;
border-top-left-radius: 0;
border-top-right-radius: 0;
&.visible {
transform: translateY(0%);
transition: 0.8s 0s, opacity 1s 3.8s;
opacity: 0;
}
}
}
JS：
$('a').on('click', function(e){
e.preventDefault();
myFunc();
});
function myFunc() {
// Set file to prepare our data
var loadUrl = "https://crossorigin.me/http://codepen.io/gutterboy/pen/ObjExz.html";
// Run request
getAjaxData(loadUrl, null, 'POST', 'html')
.done(function(response) {
var alert_el = $('#top_notify').find('.alert');
// Update msg in alert box
alert_el.text(response);
alert_el.addClass('alert-success');
// Slide in alert box
alert_el.addClass('visible');
})
.fail(function() {
alert('Problem!!');
});
// End
}
function getAjaxData(loadUrl, dataObject, action, type) {
return jQuery.ajax({
type: action,
url: loadUrl,
data: dataObject,
dataType: type
});
}
我知道我可以在JS這樣重置回其正常：
$('#top_notify').find('.alert').removeClass().addClass('alert'); // The classes it ends up with vary
...但是做之前的過渡完成後淡出的不透明度，它只是消失這消除類馬上。
我知道我可以延遲JS來抵消CSS延遲，但這樣做似乎並不是一個很好的方法，因爲您在2個不同的地方有計時。
有沒有什麼辦法可以實現這一點，同時保持由CSS完成的動畫，或者我將不得不移動到使用jQuery的animate，所以我可以在動畫完成後運行重置過程？
你有沒有想過爲第二個通知開啓一個新實例並將它們垂直堆疊在屏幕上？ –
這篇文章是有點老了，但仍可能在這裏適用：https://css-tricks.com/pop-from-top-notification/ –
@NathanielFlick嗯，我寧願只使用相同的通知框中的所有情況而不是必須創建額外的;我想這是一個選項。也感謝您的鏈接。 – Brett