html part:
<div class="lantern-text" ref="lanternTextBox"> <p class="text text-front" ref="lanternTextFornt"></p> <p class="text text-behind" ref="lanternTextBehind"></p> </div>
style section:
.lantern-text {
overflow: hidden;
width: 80%;
color: #5b6f8f;
margin-left: 40px;
position: relative;
height: 100%;
}
.text {
white-space: nowrap;
position: absolute;
width: auto;
}
.text-front {
animation: textFront linear;
}
.text-behind {
animation: textBehind linear infinite;
transform: translate(300px);
}
JS part:
. const {lanternTextFornt, lanternTextBehind, the this lanternTextBox} = $ refs;
const = {Data text: 'Request marquee content .....'};
IF (Data && data.text) {
lanternTextFornt.innerHTML = data.text ;
lanternTextBehind.innerHTML = data.text;
const = lanternBoxWidth lanternTextBox.offsetWidth;
// before calculating a movement time
const timeFornt = Math.round (lanternTextFornt.offsetWidth / 25 );
// after calculating a movement time
const timeBehind = Math.round ((+ lanternTextFornt.offsetWidth lanternBoxWidth) / 25);
lanternTextFornt.style.animationDuration timeFornt} = {$ `s`;
lanternTextBehind.style.animationDuration timeBehind} = {$` s`;
// delay time behind an animation
lanternTextBehind.style.animationDelay = `${timeFornt}s`;
// 确保恒定速率
lanternTextBehind.style.transform = `translate(${lanternBoxWidth}px)`;
lanternTextFornt.addEventListener('animationend', function() {
lanternTextFornt.style.display = 'none';
})
}