javascript - 循环脚本
问题描述
(我添加了 jsfiddle,因为 Stack 片段已关闭):https ://jsfiddle.net/5xopbujL/
我打破了我的头试图修复脚本的工作。我有以下简单的javascript:
$(document).ready(function() {
showMessage();
setInterval(function() {
$(".msg-content").empty();
showMessage();
}, 7000);
})
:root {
--msg-content-height: 26.75em;
--msg-spacing: 1em;
--msg1-height: 5.5em;
--msg2-height: 4em;
--msg3-height: 2.5em;
--msg4-height: 2.5em;
--msg5-height: 4em;
--msg6-height: 3.25em;
}
.msg-send {
position: absolute;
animation-iteration-count: 1;
animation-duration: 8s;
animation-fill-mode: forwards;
}
.msg-receive {
position: absolute;
animation-iteration-count: 1;
animation-duration: 8s;
background-color: #2d67ff;
color: #ffffff;
animation-fill-mode: forwards;
}
.msg-container {
width: 28em;
}
.msg-content {
height: var(--msg-content-height);
}
/*Animation Names*/
#msg1 {
animation-name: msg1;
}
#msg2 {
animation-name: msg2;
}
#msg3 {
animation-name: msg3;
}
#msg4 {
animation-name: msg4;
}
#msg5 {
animation-name: msg5;
}
#msg6 {
animation-name: msg6;
}
/*Key Frames*/
@keyframes msg1 {
0% {
top: calc(var(--msg-content-height) - var(--msg1-height));
left: -4em;
transform: scale(0);
}
5% {
top: calc(var(--msg-content-height) - var(--msg1-height));
left: 0;
transform: scale(1);
}
12% {
top: calc(var(--msg-content-height) - var(--msg1-height));
}
17% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
}
30% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
}
35% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
}
49% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
}
54% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
70% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
75% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
}
95% {
top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
}
100% {
top: 0;
left: 0;
}
}
@keyframes msg2 {
0% {
top: calc(var(--msg-content-height) - var(--msg2-height));
right: 0;
transform: scale(0);
opacity: 0;
}
12% {
top: calc(var(--msg-content-height) - var(--msg2-height));
right: -4em;
transform: scale(0);
}
17% {
top: calc(var(--msg-content-height) - var(--msg2-height));
right: 0;
transform: scale(1);
opacity: 1;
}
30% {
top: calc(var(--msg-content-height) - var(--msg2-height));
}
35% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
}
49% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
}
54% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
70% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
75% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
right: 0;
}
95% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
}
100% {
top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
right: 0;
}
}
@keyframes msg3 {
0% {
top: calc(var(--msg-content-height) - var(--msg3-height));
left: -4em;
opacity: 0;
transform: scale(0);
}
30% {
top: calc(var(--msg-content-height) - var(--msg3-height));
opacity: 0;
transform: scale(0);
}
35% {
top: calc(var(--msg-content-height) - var(--msg3-height));
left: 0;
transform: scale(1);
opacity: 1;
}
49% {
top: calc(var(--msg-content-height) - var(--msg3-height));
}
54% {
top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
70% {
top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
}
75% {
top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
left: 0;
}
95% {
top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
}
100% {
top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
left: 0;
}
}
@keyframes msg4 {
0% {
top: calc(var(--msg-content-height) - var(--msg4-height));
right: -4em;
opacity: 0;
transform: scale(0);
}
49% {
top: calc(var(--msg-content-height) - var(--msg4-height));
right: -4em;
opacity: 0;
transform: scale(0);
}
54% {
top: calc(var(--msg-content-height) - var(--msg4-height));
right: 0;
transform: scale(1);
opacity: 1;
}
70% {
top: calc(var(--msg-content-height) - var(--msg4-height));
}
75% {
top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
right: 0;
}
95% {
top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
}
100% {
top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
right: 0;
}
}
@keyframes msg5 {
0% {
top: calc(var(--msg-content-height) - var(--msg5-height));
left: -4em;
opacity: 0;
transform: scale(0);
}
70% {
top: calc(var(--msg-content-height) - var(--msg5-height));
left: -4em;
opacity: 0;
transform: scale(0);
}
75% {
top: calc(var(--msg-content-height) - var(--msg5-height));
left: 0;
transform: scale(1);
opacity: 1;
}
95% {
top: calc(var(--msg-content-height) - var(--msg5-height));
}
100% {
top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
left: 0;
transform: scale(1);
opacity: 1;
}
}
@keyframes msg6 {
0% {
top: calc(var(--msg-content-height) - var(--msg6-height));
right: -4em;
opacity: 0;
transform: scale(0);
}
95% {
top: calc(var(--msg-content-height) - var(--msg6-height));
right: 0;
opacity: 0;
transform: scale(0);
}
100% {
top: calc(var(--msg-content-height) - var(--msg6-height));
right: 0em;
opacity: 1;
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
<div class="msg-content w-100 relative">
<div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
<div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
<div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>
</div>
</div>
一切都很好,但我找不到如何在“消息”块到达--msg-content-height
. 以及如何循环消息?那么如何让消息到达顶部时消失并循环它们呢?
解决方案
如果您在动画结束时收听每条消息,则可以将其删除。然而,它对于演示目的很有用,包括连续消息的延迟。您可能需要调整关键帧的百分比。
$('#msg1, #msg2, #msg3').on('animationend', function () {
$(this).remove();
});
#msg1 {
animation-name: msg1;
}
#msg2 {
animation-name: msg2;
animation-delay: 1s;
}
#msg3 {
animation-name: msg3;
animation-delay: 2s;
}
推荐阅读
- ios - 按 @ 时包括电话号码和显示名称
- c - C Array 创建木马?
- java - 如何从 firebase 检索图像和文本到回收视图?
- javascript - JavaScript 转置数据
- android - RxJava observeOn / subscribeOn 仅在测试环境中有效
- javascript - 在有多个条目的Webpack v4中,我的splitChunks没有优化,如果我的两个页面包含core-js,它们都会得到一个副本
- javascript - 用带条件的数字升序填充数组
- jquery - 我正在使用 Jquery 添加一个 src 属性,但它的工作方式不同。为什么?
- php - 无法将 html css 和 js 应用程序部署到 heroku,“注意:composer.lock 中不需要运行时;使用 PHP ^7.0.0”
- javascript - 如何从给定路径构建dom元素