javascript - JS : Iterate over array, 在通知中按顺序显示每个项目

Question

我正在尝试迭代一个数组，在通知中按顺序显示每个项目:

1. 从底部向上滑动并带有 CSS 动画
2. 显示时延迟3秒
3. 用 CSS 动画滑回底部
4. 加载下一个项目之前间隔 8 秒

此外，当鼠标悬停时，通知应保留在屏幕上，并在鼠标移出时隐藏(第二次延迟后)。

我有以下问题:

1. 如何在 CSS 动画后创建 3 秒的延迟？
2. 如何按顺序迭代项目？在下面的代码中，它们会立即执行。
3. 如何暂停和恢复动画？

https://jsfiddle.net/3905wogc/1/

    $(function() {
        var delay = 3000,
        interval = 8000,
        $el = $('#notification'),
        data = [{
            id: 1,
            content: 'First Notification'
        },
        {
            id: 2,
            content: 'Second Notification'
        },
        {
            id: 3,
            content: 'Third Notification'
        }];

        $.each(data, function (i, item) {

            console.log (item);

            // add the content to the html
            $el.html(item.content);

            $el.addClass('in');

            $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                // animate in complete
                console.log('in complete', i);

                // add delay before slide out
                $el.removeClass('in').addClass('out');

                $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    // animate out complete
                    console.log('out complete', i);

                    // add interval before next slide in
                });
            });
        });

        $el.on('mouseover', function () {
            // pause the animation 
        });

        $el.on('mouseout', function () {
            // resume the animation 
        });
    });

Answer 1

这是Demo

var delay = 3000,
    interval = 8000 + delay,
    $el = $('#notification'),
    data = [{
        id: 1,
        content: 'First Notification'
    },
            {
                id: 2,
                content: 'Second Notification'
            },
            {
                id: 3,
                content: 'Third Notification'
            }],
    currentItem = 0 ,
    timeoutTrack ,
    intervalTrack;

showNextOne();
var intervalTrack = setInterval(function(){showNextOne();},interval);


function showNextOne()
{
    $el.html(data[currentItem].content).addClass("in");
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    if(currentItem +1 >= data.length)
        currentItem = 0;
    else
        currentItem++;
}

$el.on("mouseenter",function()
{
    if(timeoutTrack)
        clearTimeout(timeoutTrack);
    if(intervalTrack)
        clearInterval(intervalTrack);
});
$el.on("mouseleave",function()
{
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    intervalTrack = setInterval(function(){showNextOne();},interval);
});