播放两个数字之间的每个数字的动画

编程问答 2022-06-10

问题描述

我正在尝试获取两个数字之间的所有数字，并为每个数字播放一个动画。 如果添加班级，则会显示动画。

<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>

old_date和new_date只是一个字符串，我将其设置为int，以获取之间的数字数组。 然后，我检查数字是否为

整个目标是我有多个事件，每个事件都有一个日期。如果用户单击以显示下一个事件，则日期应更改为新事件的日期。但是对于两个日期之间的每个数字，该动画应该始终为1500ms。


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";

这是CSS中的动画

.numbers {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 82px;
    color: #C81423;
}
.numbers.anim {
    transform: translateY(-100px);
}
#date1 {
    display: none;
}
#date2 {
    display: block;
}

我无法使每个数字的动画重新开始。 感谢您的帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationforeachhtmljavascript