Javascript 在两个数字之间播放每个数字的动画
我试图得到两个数字之间的所有数字,并为每个数字播放动画。 如果添加类,则会显示动画Javascript 在两个数字之间播放每个数字的动画,javascript,html,animation,foreach,Javascript,Html,Animation,Foreach,我试图得到两个数字之间的所有数字,并为每个数字播放动画。 如果添加类,则会显示动画 <div class="section"> <div class="heading">Anstehende Termine</div> <div class="grid"> <div class="left"> <
<div class="section">
<div class="heading">Anstehende Termine</div>
<div class="grid">
<div class="left">
<div class="day">
<div id="number1" class="numbers"></div>
<div id="number2" class="numbers"></div>
</div>
</div>
<div class="mid">
<div class="title">16. Arbeitskreis Energiemanagement in kleineren Kommunen</div>
<div class="description">Kom.EMS ist ein Instrument zur Einführung eines strategischen kommunalen Energiemanagements, das von den Energieagenturen Baden-Württemberg, Thüringen, Sachsen und Sachsen-Anhalt entwickelt und in den Kommunen…</div>
<div class="title transparent">Unternehmensübernahme – erfolgreich</div>
<img class="arrow-bottom" src="../assets/arrow_bottom.svg" alt="scroll bottom">
</div>
<div class="right">
<img class="arrow" src="../assets/arrow.svg" alt="Alle Termine">
</div>
</div>
</div>
<div class="section2">
<div id="old_date" class="date">03</div>
<div id="new_date" class="date">09</div>
</div>
我无法为每个数字重新启动动画。
谢谢你的帮助
let old_date = $('#old_date').text();
let new_date = $('#new_date').text();
let old_date_string = parseInt(old_date);
let new_date_string = parseInt(new_date);
function range(start, end) {
return Array(end - start + 1).fill().map((_, idx) => start + idx)
}
let result = range(old_date_string, new_date_string);
console.log(result);
result.forEach(element => {
if (element < 10) {
let numString = element.toString();
let fullString = '0' + numString;
setTimeout(function () {
anim(fullString);
}, 0);
console.log(fullString)
} else {
let fullString = element.toString();
setTimeout(function () {
anim(fullString);
}, 0);
console.log(fullString)
}
});
let number1 = $('#number1');
let number2 = $('#number2');
number1.text(old_date);
function anim (fullString) {
let numbers = $('.numbers')
numbers.css('transition', TransitionDuration);
numbers.addClass('anim');
number2.text(fullString);
setTimeout(function(){
numbers.css('transition', '');
numbers.removeClass('anim');
}, 1500);
}
//calc the transition duration between each anim(), to always be 1500ms
let clacTransition = 1500 / result.length;
let TransitionDuration = clacTransition.toString() + "ms";
.numbers {
width: 100%;
height: 100%;
text-align: center;
font-size: 82px;
color: #C81423;
}
.numbers.anim {
transform: translateY(-100px);
}
#date1 {
display: none;
}
#date2 {
display: block;
}