Question

我正在可视化JavaScript / CSS动画，以便为显示数据的静态页面带来一些动作。但是要与代码斗争。

背景
每隔几分钟读取一个JSON文件，并将其数据提取到一个JS数组中，每个项目都作为子div元素添加到页面上的父div。

预期结果（类似于手机通知）

活动顺序

第一个数组项被添加到div容器中（使用右侧动画中的幻灯片），如上面的演示中所示。
当添加下一个项目（即下一个数组元素）时，所有可见HTML＆＃34;堆栈＆＃34;向下移动1个高度，为下一个项目腾出空间（我认为JQuery＆＃39; div.children()选择器在这里会派上用场）。
该项目现在滑入顶部的空间。
如果＆＃34;堆栈＆＃34;已经包含4个元素，还需要添加另一个元素，因为它没有到达数组的末尾，最旧的项目应该向右滑出（如第1项滑出时所示，为第5项腾出空间） - 简单地说，将总可见元素保持在4。

问题
我能够将JSON数据添加到列中，但从未能够成功制作任何动画。到目前为止，我已经研究过动画库和其他帖子，但没有成功，没有什么能接近我想要实现的目标。如果有人可以在添加/移动/移除项目时帮助我完成动画，我将不胜感激。

守则

＆＃13;

var allRecents = []; // Master List
(function worker() {
    $.ajax({
        url: 'recent.json', // LINK TO JSON FILE HERE
        dataType: 'json',
        cache: false,
        success: function (data) {
            if (data.recent.length > 0 || allRecents.length > 0) {
                // Remove Empty Message
                $('#emptyMessage').remove();

                // Pull Recent Additions From JSON File
                var justAdded = [];
                for (r in data.recent) {
                    //console.log("++++++ NEW JSON ELEMENT ++++++");
                    var title = data.recent[r].title;
                    var added = data.recent[r].added;
                    var type = data.recent[r].type;

                    // Color-coded Elements
                    if (type == 'Movie') {
                        var color = 'crimson';
                    } else {
                        var color = 'darkorchid';
                    }
                    
                    justAdded.push([title, added, type]);

                    // DOM Element to Add
                    var block = '<div id="recent-media" class="info-container '
                        + color + '"><div class="when center"><h4>'
                        + added + '</h4></div><div class="what"><h4>'
                        + title + '</h4></div></div>'
                
                    var alreadyAdded = false;
                    for (var i = 0; i < allRecents.length; i++) {
                        if (title == allRecents[i][0]) {
                            alreadyAdded = true;
                            break;
                        }
                    }
                    if (alreadyAdded == false) {
                        allRecents.push([title, added, type]);
                        if ($('.list').length) {
                            $('.list').prepend(block);
                        } else {
                            $('.list').append(block);
                        }
                        
                        console.log("Item " + title + " has been added to allRecents")
                    } else {
                        console.log("Item " + title + " already extists in allRecents")
                    }
                }
                console.log(allRecents);
            } else {
                if (!$('#emptyMessage').length) {
                    $('.list').append('<div id="emptyMessage" class="container center"><h4>Its Pretty Quiet Around Here,</h4><h4>- Nothing to Show -</h4></div>');
                }
            };
        },
        statusCode: {
            404: function () {
                alert('There was a problem with the server.  Try again soon!');
            }
        },
        complete: function() {
            // Schedule the next request when the current one's complete
            setTimeout(worker, 10000);
          }
    });
})();

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


/* Grid Content */
.grid {
    display: grid;
    grid-template-columns: 50% repeat(1, 1fr);
    grid-gap: 10px;
    height: 100%;
    margin: 0;
    padding: 0;
}

.column {
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

.column-title {
    height: 8%;
    width: auto;
}
.info-container {
    height: 5%;
    width: 100%;
    display: inline-flex;
    position: relative;
}
.container {
    height: 23%;
    width: auto;
}

.center {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    text-align: center;
}

.when {
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    display: flex;
    background-color: rgb(82, 52, 52);
}
.what {
    padding-left: 20px;
    padding-right: 5px;
    align-items: center;
    display: flex;
}

#right-column {
    overflow: auto;
}
::-webkit-scrollbar { 
    display: none; 
}

.list {
    height: 92%;
}
/* End Grid Content */

/* Fonts */
h1, h3, h2, h4, h5, h6 {
    margin: 0;
    padding: 0;
    /*display: block;*/
}

h1 {
    font-size: 3em;
}

h3 {
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 2em;
}
h4 {
    font-size: 1em;
}
/* End Fonts */


/* Custom Colors */
.light-green {
    background-color: lightseagreen;
}
.dark-green {
    background-color: darkgreen;
}
.blue {
    background-color: cornflowerblue;
}
.crimson {
    background-color: crimson;
}
.darkorchid {
    background-color: darkorchid;
}
.orange {
    background-color: #e74c3c;
}
.background {
    background-color: rgb(80, 80, 80);
}
.transparent {
    background-color: rgba(0,0,0,.2);
}
/* End Custom Colors */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <!-- The JSON data below must be linked to as a separate file to manipulate it while the HTML displays -->


<body>
        <div class="grid background">
            <!-- Left Column -->
            <div class="column transparent"> 
                <div class="center light-green column-title">
                    <h3>OVERVIEW</h3>
                </div>
                <div class="container blue center">
                    <div>
                        <h1 class="count">5</h1>
                    </div>
                    <h2>Total Media</h2>
                </div>
                <div class="container crimson center">
                    <div>
                        <h1 class="count">3</h1>
                    </div>
                    <h2>Movies</h2>
                </div>
                <div class="container darkorchid center">
                    <div>
                        <h1 class="count">2</h1>
                    </div>
                    <h2>TV Shows</h2>
                </div>
                <div class="container blue center">
                    <h1>N/A</h1>
                    <h2>Used</h2>
                </div>
            </div>
            <!-- Right Column -->
            <div id="right-column" class="column transparent">
                <div class="center light-green column-title">
                    <h3>RECENTLY ADDED</h3>
                </div>
                <div class="list"></div>
            </div>
        </div>
    </body>

＆＃13;

提供Ajax请求的JSON数据文件
它必须作为一个单独的文件链接并在函数中引用才能工作 { "recent": [ { "title":"Item 1", "added": "21:14", "type": "Movie" }, { "title":"Item 2", "added": "11:19", "type": "TV" }, { "title":"Item 3", "added": "07:46", "type": "Movie" }, { "title":"Item 4", "added": "07:46", "type": "Movie" }, { "title":"Item 5", "added": "14:05", "type": "TV" } ] }

我总是尽量简洁，希望顶部的演示清楚，如果没有，我很乐意添加更多信息。为每个人欢呼。

使用JavaScript动态内容幻灯片动画

0 个答案: