如何将一个div的文本动画化？ [英] How can I animate a text from one div to another?
问题描述
我有两个div，用作字幕显示的两行。第2行显示了较新的标题，第2行的标题变为第1行，第1行的标题已停止显示。 （第2行在第1行下方），
I have two divs that acts as two lines for captions display. newer caption is shown in line2, line2's caption goes to line 1, line1's caption is stopped being displayed. (line2 is below line1),
我要设置文本动画，以便在第2行添加新标题且第1行获得第2行标题时，该标题从第2行滑向第1行
I want to animate text so that when line2 is added with new caption and line1 gets line2's caption, the caption slides from line2 to line1 instead of instantly being put to line1.
代码：（忽略js代码，直到注释从这里开始，这只是字幕数据操作。）
CODE: (ignore js code till the comment "start here", it's just caption data manipulation. )
https://jsfiddle.net/wzs8oruh/2/
如果运行此命令，您将理解我要说的话。
我希望第二行将其内容设置为动画，然后更新其内容。而不是立即发生的事情。
if you run this, you'll understand what i'm trying to say. I want 2nd line to animate it's content to first line, then update it's content. instead of what's happening right now, instantaneously.
（subCaptions是一个数组，其中标题对象的格式为 { start：1585180670495， end：1585180678735， transcript： captionText} ）
( subCaptions is an array with captions objects of form {"start":1585180670495,"end":1585180678735,"transcript":"captionText"} )
JS部分可更新两个div中的文本：
JS part that updates text in two divs:
let line1 = document.getElementById("caption-text-1");
let line2 = document.getElementById("caption-text-2");
//randomly set asper the first caption data start time.. increases by one second every second
let playerTime = 1585180668495;
let displayArray = [];
function updateCaptionsText() {
if (!isNaN(playerTime) && playerTime > 0) {
//if caption exists to show
if(subCaptions[0]){
if( playerTime >= subCaptions[0].start ){
//display array can have at max two caption data to show in two lines. first object in line1, second in line2. if 2 already exist, remove first and append to it new caption.
if( displayArray.length >= 2 ){
displayArray.shift();
displayArray.push(subCaptions.shift());
}else{
displayArray.push(subCaptions.shift());
}
}
}
//update divs with displayArray's contents
switch(displayArray.length){
case 0:
line1.textContent = "";
line2.textContent = "";
break;
case 1:
line1.textContent = "";
line2.textContent = displayArray[0].transcript;
break;
case 2:
line1.textContent = displayArray[0].transcript;
line2.textContent = displayArray[1].transcript;
break;
default:
break;
}
}
}
setInterval(() => {
playerTime += 1000;
updateCaptionsText();
}, 1000);
推荐答案
修改后的JS ：（给了您说的subCaptions ）
modified JS: ( given subCaptions as you say you have )
function getNewcaptionDiv(captionText){
var iDiv = document.createElement('div');
iDiv.className = "capText";
iDiv.innerText = captionText;
iDiv.style.height="35px";
if(captionText === ""){
iDiv.style.padding=0;
}
return iDiv
}
function display(iDiv){
if(captionsParentDiv.childNodes.length==2){
captionsParentDiv.removeChild(captionsParentDiv.childNodes[0]);
}
captionsParentDiv.appendChild(iDiv);
}
function updateCaptionsText() {
if (!isNaN(playerTime) && playerTime > 0) {
if(subCaptions[0]){
if( playerTime >= subCaptions[0].start ){
display(getNewcaptionDiv((subCaptions.shift()).transcript));
}
}
}
}
function initCaptionsDiv(){
captionsParentDiv = document.getElementById("caption-texts");
captionsParentDiv.appendChild(getNewcaptionDiv(""));
setInterval(() => {
playerTime += 1000;
updateCaptionsText();
}, 1000);
}
initCaptionsDiv();
修改过的HTML：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Captions update algo</title>
</head>
<body>
<div id="caption">
<div id="captionBottom">
<div id="caption-texts" class="captionText"></div>
</div>
</div>
<script src="captionsUpdate3.js"></script>
</body>
</html>
修改后的CSS：
#caption{
margin-left: auto;;
margin-right: auto;
margin-top: auto;
margin-bottom: 10%;
height: 74px;
width: 80%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#captionTop{
height: 60px;
}
#captionBottom{
height: 74px;
}
.captionText{
font-size: 1.4vw;
color: white;
font-weight: 900;
line-height: 35px;
margin: 2px;
position: relative;
}
body{
background:linear-gradient(180deg, #074595 0%, #6589A4 100%);
background-repeat: no-repeat;
height: 100vh;
}
.capText{
width: max-content;
height: 35px;
padding-left: 10px;
padding-right: 10px;
margin: 2px;
text-align: center;
background-color: black;
margin-left: auto;
margin-right: auto;
}
.capText:first-child {
-webkit-animation: move 0.4s ease-out;
animation: move 0.4s ease-out;
}
@-webkit-keyframes move {
0% {margin-top: 35px;}
100% {margin-top: 2px;}
}
@keyframes move {
0% {margin-top: 42px;}
100% {margin-top: 2px;}
}
应该为您提供想要的东西。
Should get you what you want.
这篇关于如何将一个div的文本动画化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
