Anime.js 不再播放 onclick

如何解决Anime.js 不再播放 onclick

这是anime.js文本动画，在复选框被选中后工作，但我希望当复选框被选中然后如果我点击COMMIT按钮然后它应该重新启动动画，不再播放-点击，我犯了什么错误，我的尝试如下。

我的整个代码是：

play

function myTYPINGFunction() {
    var checkBox = document.getElementById("myCheck");
    var textwrappers = document.querySelectorAll('.text');

    textwrappers.forEach(textwrapper => {
        if (checkBox.checked == true) {
            textwrapper.innerHTML = textwrapper.textContent.replace(/(\S*)/g,m => {
                return `<span class="word">` +
                    m.replace(/(-|)?\S(-|@)?/g,"<span class='letter'>$&</span>") +
                    `</span>`;
            });

            var targets = Array.from(textwrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: true,})
                .add({
                    targets: targets,scale: [3,1],scaleY: [1.5,opacity: [0,translateZ: 0,easing: "eaSEOutExpo",duration: 400,delay: (el,i) => 20 * i
                }).add({
                    opacity: 0,duration: 10000,delay: 800
                })
            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function () {
                textwrapper.innerHTML = textwrapper.textContent.replace(/(<([^>]+)>)/gi,"");
            },850);


            var targets = Array.from(textwrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: false,})
                .add({
                    targets: targets.reverse(),scale: [1,2],scaleY: [1,1.5],opacity: [1,0],duration: 10,i) => 15 * i
                });
            setTimeout(function () {
                $(".text").addClass('zoomIn2');
            },800);
        }
    })
}

.word {
    border: 1px solid red;
}

.letter {
    border: 1px solid lightblue;
}

input.largerCheckBox {
    width: 20px;
    height: 20px;
}

.zoomIn2 {
    animation: zoomIn2 1000ms both
}

@keyframes zoomIn2 {
    from {
        opacity: 0;
        transform: scale3d(0,0);
    }

    50% {
        opacity: 1;
    }
}

.letter {
    display: inline-block;

}

.word {
    white-space: Nowrap;
}

我尝试的是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label>
<input type="checkBox" id="myCheck" class="largerCheckBox" onclick="myTYPINGFunction()">
<button id="button2">play</button>

<h1 class="text">CheckBox is CHECKED!</h1>
<h1 class="text">CheckBox is CHECKED!</h1>
<h1 class="text">CheckBox is CHECKED!</h1>

还有这个：

 function myTYPINGFunction() {
    var checkBox = document.getElementById("myCheck");
    var textwrappers = document.querySelectorAll('.text');

    textwrappers.forEach(textwrapper => {
        if (checkBox.checked == true) {
            textwrapper.innerHTML = textwrapper.textContent.replace(/(\S*)/g,})
            var animate1 = anime({
                targets: targets,i) => 20 * i
            }).add({
                opacity: 0,delay: 800
            })
            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function() {
                textwrapper.innerHTML = textwrapper.textContent.replace(/(<([^>]+)>)/gi,850);


            var targets = Array.from(textwrapper.querySelectorAll('.letter'));

            anime.timeline({
                    loop: false,i) => 15 * i
                });
            setTimeout(function() {
                $(".text").addClass('zoomIn2');
            },800);
        }
    })

}

function animateall() {
    animate1.restart();
}

document.querySelector('#button2').onclick = animateall;

解决方法

您只需要创建一个动画数组并重新启动每个动画

var checkBox = document.getElementById("myCheck");
var animation = [];

function myTYPINGFunction() {
    animation = [];
    
    var textWrappers = document.querySelectorAll('.text');

    textWrappers.forEach(textWrapper => {
        if (checkBox.checked == true) {

            textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g,m => {
                return `<span class="word">` +
                    m.replace(/(-|)?\S(-|@)?/g,"<span class='letter'>$&</span>") +
                    `</span>`;
            });

            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            let ani = anime.timeline({
                loop: true,})
                .add({
                    targets: targets,scale: [3,1],scaleY: [1.5,opacity: [0,translateZ: 0,easing: "easeOutExpo",duration: 400,delay: (el,i) => 20 * i
                }).add({
                    opacity: 0,duration: 10000,delay: 800
                });

            animation.push(ani);

            $(".text").removeClass('zoomIn2');

        } else {
            setTimeout(function () {
                textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>]+)>)/gi,"");
            },850);


            var targets = Array.from(textWrapper.querySelectorAll('.letter'));

            anime.timeline({
                loop: false,})
                .add({
                    targets: targets.reverse(),scale: [1,2],scaleY: [1,1.5],opacity: [1,0],duration: 10,i) => 15 * i
                });
            setTimeout(function () {
                $(".text").addClass('zoomIn2');
            },800);
        }
    })

}

function restartAnimation() {
    if (checkBox.checked) {
        animation.forEach(element => {
            element.restart();
        });
    }
}

.word {
    border: 1px solid red;
}

.letter {
    border: 1px solid lightblue;
}

input.largerCheckbox {
    width: 20px;
    height: 20px;
}

.zoomIn2 {
    animation: zoomIn2 1000ms both
}

@keyframes zoomIn2 {
    from {
        opacity: 0;
        transform: scale3d(0,0);
    }

    50% {
        opacity: 1;
    }
}

.letter {
    display: inline-block;

}

.word {
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label>
<input type="checkbox" id="myCheck" class="largerCheckbox" onclick="myTYPINGFunction()">
<button id="button2" onclick="restartAnimation()">play</button>

<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>