簡單的toastr通知消息

我想實現簡單的toastr（通知）功能而不使用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

來源

2017-06-12 Tabraiz Ali

使用setTimout()和removeClass刪除您想通過這門課。當你在同一時間調用的setTimeout與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); 
};

來源

2017-06-12 10:08:22

刪除最後一個元素是不可預測的，因爲可能會添加新的通知，並且它會一直刪除添加的最後一個元素的類，這是錯誤的。所以我爲每個通知添加了一個ID。並在一定的時間間隔後移除該元素。回答了我自己的問題：https：//stackoverflow.com/a/44496961/6774615 –

@TabraizAli任何方式我認爲你需要setTimeout功能 –

感謝@Dinesh回答這個問題。幫助我達成解決方案 –

去掉最後一個元素添加過渡類是不可預測的，因爲可以有新的通知，且將其永遠刪除添加的類中最後一個元素這是錯誤的。所以我爲每個通知添加了一個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);

來源

2017-06-12 10:15:56

簡單的toastr通知消息

回答

相關問題