簡単なtoastr通知メッセージ

Question

toastrプラグインなしで単純なtoastr（通知）機能を実装したいと思います。

5秒後に最後に追加された要素の遷移クラスを削除したいと考えています。

var loadNotification = function(typeClass, message) { 
    var notification = { 
     typeClass: typeClass || 'alert-success', 
     message: message 
    }; 

    var template = UTILS.getHandleBarTemplate('#template-notification'); 
    var templateMarkup = template(notification); 
    $('.notifications-area').append(templateMarkup); 


    $('.notifications-area').find('.q-notifications').last().addClass('transitioned'); 
}; 

現在Implementaion：

Notifications Gif

Answer 1

したいクラスを削除するsetTimout()とremoveClassを使用してください。あなたは5000（5秒）

var loadNotification = function(typeClass, message) { 
    var notification = { 
     typeClass: typeClass || 'alert-success', 
     message: message 
    }; 

    var template = UTILS.getHandleBarTemplate('#template-notification'); 
    var templateMarkup = template(notification); 
    $('.notifications-area').append(templateMarkup); 


    $('.notifications-area').find('.q-notifications').last().addClass('transitioned'); 
    setTimout(function(){ 
    $('.notifications-area').find('.q-notifications').last().removeClass('transitioned'); 
    },5000); 
}; 

Answer 2

は最後の要素を取り除くと同時に、通話のsetTimeoutで移行クラスを追加するとそこに新しい通知を追加することができ、それは常に最後の要素のクラスが追加削除されますように予測可能ではなかったですそれは間違っている。そこで、通知ごとにIDを追加しました。特定の間隔の後にその要素を削除しました。

var notificationId = $('.notifications-area').find('.q-notifications').length; 
    var notification = { 
     typeClass: typeClass || 'alert-failure', 
     message: message, 
     notificationId: notificationId 
    }; 

    var template = QUBOLE.UTILS.getHandleBarTemplate('#template-notification'); 
    var templateMarkup = template(notification); 
    $('.notifications-area').append(templateMarkup); 

    // Adding transitioned class quickly doesn't have apply the css transition 
    setTimeout(function() { 
     $('#notification_'+notificationId).addClass('transitioned'); 
    }, 0); 

    setTimeout(function() { 
     $('#notification_'+notificationId).removeClass('transitioned'); 
    }, 5000); 
    setTimeout(function() { 
     $('#notification_'+notificationId).remove(); 
    }, 6000);