Jquery在每次单击时触发动画（问题）

我需要在每个按钮单击时触发动画，而不是像我在下面的代码片段中那样切换按钮类：

我尝试了

addClass（）

和

removeClass（）

类似的方法，但效果并不理想，下面是代码：

$（文档）.ready（函数（）{
$（“按钮[类*='navbar-toggler']）。单击（函数（）{
$（this.toggleClass（“我的动画”）
});
})

@为我的动画设置关键帧{
16.65% {
变换：translateY（8px）；
}
33.3% {
transform:translateY（-6px）；
}
49.95% {
变换：translateY（4px）；
}
66.6% {
transform:translateY（-2px）；
}
83.25% {
变换：translateY（1px）；
}
100% {
变换：translateY（0）；
}
}
.我的动画{
动画名称：我的动画；
动画持续时间：1s；
动画计时功能：轻松进出；
动画迭代次数：1；
}

---

使用setTimeout函数删除我的动画类并使用

.navbar-toggler{
outline:0!important;
}

$（文档）.ready（函数（）{
if（！$（“按钮[类*='navbar-toggler']）。hasClass（'my-animation'））{
$（“按钮[类*='navbar-toggler']）。单击（函数（）{
$（this.addClass（“我的动画”）；
setTimeout（function（）{$（“button[class*='navbar-toggler']））.removeClass（“我的动画”）；}，1000）；
});
}
})

@为我的动画设置关键帧{
16.65% {
变换：translateY（8px）；
}
33.3% {
transform:translateY（-6px）；
}
49.95% {
变换：translateY（4px）；
}
66.6% {
transform:translateY（-2px）；
}
83.25% {
变换：translateY（1px）；
}
100% {
变换：translateY（0）；
}
}
.我的动画{
动画名称：我的动画；
动画持续时间：1s；
动画计时功能：轻松进出；
动画迭代次数：1；
}
.导航杆切换器{
大纲：0！重要；
}

这可能会对您有所帮助 使用

$（文档）.ready（函数（）{
$（“按钮[类*='navbar-toggler']）。单击（函数（）{
$（this.addClass（“我的动画”）；
setTimeout（函数（）{
$（'YourId'）.removeClass（'my-animation'）；
}, 200);
});
})

如果您使用$（this）.removeClass（）而不是$（“button[class*='navbar-toggler']），为什么它不起作用。removeClass（）？？