Javascript附加通知、动画和删除

我有一个名为show_alert的js函数

function show_alert(type='info', $message) {

$('.notifications-area').append(' \
    <div class="notification opened ' + type + '"> \
        <h5>' + $message + '</h5> \
    </div> \
');

setTimeout(function(){
    $('.notification').addClass('closed');
  }, 4000);
}

函数显示警报（type='info'，$message）{
$（'.notifications area'）。追加（'\
\
“+$message+”\
\
');
setTimeout（函数（）{
$（'.notification'）.addClass（'closed'）；
}, 4000);
}

打开的和关闭的css类包含一些关键帧，打开的类使其出现，关闭的类使其消失。我想在关闭的动画发生后删除html。

您可以使用api

你可以这样做

function show_alert(type='info', $message) {
  var randomId = getRandomId ();

  $('.notifications-area').append(' \
    <div id="' + randomId + '" class="notification opened ' + type + '"> \
        <h5>' + $message + '</h5> \
    </div> \
  ');

setTimeout(function(){
    $('#' + randomId).addClass('closed');
    // you still have the randomId,
    $('#' + randomId).remove();
  }, 4000);
}}

函数显示警报（type='info'，$message）{
var randomId=getRandomId（）；
$（'.notifications area'）。追加（'\
\
“+$message+”\
\
');
setTimeout（函数（）{
$（'#'+randomId）.addClass（'closed'）；
//你还有随机ID，
$（'#'+randomId）.remove（）；
}, 4000);
}}

---

因此，在动画完成后，jquery将从html中删除DOM。

未经测试，但类似的操作应该可以工作：

function show_alert(type='info', $message) {
  var notification = $('<your notification element html here/>');

  $('.notifications-area').append(notification);

  setTimeout(function(){
    notification.addClass('closed');
  }, 4000);

  setTimeout(function(){
    notification.remove();
  }, 8000);
}

函数显示警报（type='info'，$message）{
风险值通知=$（''）；
$（'.notifications area'）。追加（通知）；
setTimeout（函数（）{
notification.addClass（“已关闭”）；
}, 4000);
setTimeout（函数（）{
通知。删除（）；
}, 8000);
}

---

通过首先为通知创建元素并将其分配给一个变量，您可以在以后使用它的引用，而不需要任何ID或任何必须首先在DOM中“查找”元素的方法。

我想您忘记描述您的问题了吗？您的问题是无法确定关键帧何时完成，以便可以对元素调用.remove（）？我知道，但我需要指定要关闭的警报，我可能有更多警报，需要对当前警报进行某种引用。添加ID（随机生成）并将其与通知关联。然后使用已关闭通知的id将其删除。这将帮助您唯一地标识通知。

function show_alert(type='info', $message) {
  var notification = $('<your notification element html here/>');

  $('.notifications-area').append(notification);

  setTimeout(function(){
    notification.addClass('closed');
  }, 4000);

  setTimeout(function(){
    notification.remove();
  }, 8000);
}