javascript - onclick hiding section running in a loop

Question

Ok, I'm building an onepage website with javascript and tailwind css. All pages are in "display none" except the current page, and onclick on a "next" button, the current page becomes "hidden" and the next page loses the "hidden" class. Up to now everything worked fine, but I decided to display a "back" button, which puts the current page in "hidden", and removes it from the previous page. The problem is the following: the animations hiding the two pages start in a loop, one after the other.

$cancelOptions.click(function () {
        $options.addClass("animate__animated animate__zoomOut");
        $options.on("animationend",function () {
            $options.addClass("hidden");
            $offers.removeClass("hidden").addClass("animate__animated animate__zoomIn");
        })
    })
$selectVitrine.click(function () {
        $offers.addClass("animate__animated animate__zoomOut");
        $offers.on("animationend", function () {
            $offers.addClass("hidden");
            $options.removeClass("hidden").addClass("animate__animated animate__zoomIn");
        })
    })

Here, $cancelOptions and $selectVitrines are my buttons, and $offers and $options are my two sections. Basically, when you click on #cancelOptions, the options section disappears, and the offers section appears and then disappears.... in a loop.

EDIT : when I click on the "selectvitrine" button, no loop is launched

Answer 1

等待大神答复