У меня есть два div, которые действуют как две строки для отображения подписей. новый заголовок отображается в строке 2, заголовок строки 2 переходит к строке 1, заголовок строки 1 перестает отображаться. (строка 2 находится ниже строки 1),
Я хочу анимировать текст, чтобы при добавлении строки 2 с новым заголовком, а строка 1 получала заголовок строки 2, заголовок перемещался из строки 2 в строку 1 вместо того, чтобы сразу помещаться в строку 1.
КОД: (игнорировать js код до тех пор, пока комментарий не «начнется здесь», это просто манипулирование данными заголовка.)
https://jsfiddle.net/wzs8oruh/2/
если вы запустите это, вы поймете, что я пытаюсь сказать. Я хочу, чтобы 2-я строка анимировала его содержимое в первую строку, а затем обновила его. вместо того, что происходит сейчас, мгновенно.
(subCaptions - это массив с объектами титров в форме {"start": 1585180670495, "end": 1585180678735, "transcript": "captionText"} )
JS часть, которая обновляет текст в двух делениях:
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);