Javascript jQuery在单击时对元素应用转换

每次单击按钮时，我都尝试应用淡入淡出过渡

实现这一目标的最佳做法是什么？

因此，在添加了.addClass（）之后，再添加.removeClass（），而不是.addClass（）， 想象一下像.apply（）这样的东西只应用一次类 所以它不能“保持”课堂

现在我有了

.toggleClass

，它只会每隔单击一次应用转换（基本上像：addClass、removeClass、addClass等等）。我可以考虑用另一种方式来做，看看它是否已经有了这个类，如果没有，那么就删除它，然后再添加一次，但这似乎太违反直觉了，让我觉得必须有一种更简单、更干净的方法来做这件事

$（“#btn”）。单击（函数（）{
$（“#猫”）。切换类别（“褪色”）；
})

@导入url（'https://fonts.googleapis.com/css?family=Yatra+一);；
身体，
html{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景色：#eee；
}
.发电机{
高度：400px；
宽度：400px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
}
#猫{
高度：300px；
宽度：400px；
边界半径：5px；
变换：比例（1）；
不透明度：1；
}
.褪色{
动画：淡入淡出。5s线性向前；
}
@关键帧淡入淡出{
0% {
变换：比例（1）；
不透明度：1；
}
50% {
变换：比例（0）；
不透明度：0；
}
100% {
变换：比例（1）；
不透明度：1；
}
}
#btn{
高度：90px；
宽度：400px；
大纲：无；
边界：无；
边界半径：5px；
背景色：#4682B4；
颜色：白色；
字号：1.75em；
字体系列：雅特拉一号；
过渡：背景色0.1s缓进缓出；
}
#btn：悬停{
光标：指针；
背景色：#508EC3；
}
#btn：活动{
背景色：#4293D8；
}

新猫

通过收听动画事件，您可以在动画结束时删除

淡入淡出

类：

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

---

在这种情况下，您可以使用

addClass

而不是

toggleClass

通过收听动画事件，在动画结束时删除

fade

类：

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

---

在这种情况下，您可以使用

addClass

而不是

toggleClass

，使用

toogleClass（）

此处可能不是最佳解决方案。发生的情况是：

启动时，

没有

.fade

类

单击该按钮时，将添加该类，从而启动关键帧动画

但当您再次单击时，它将删除该类

因此，您必须再次单击以重新启动动画

但现在我还没有更好的方法。Nandita的答案实际上也有相同的行为，只是代码多一点

阿里的一个其实是最好的一个：

$("#btn").click(function() {
      $("#cat").addClass("fade");
})

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

---

播放动画事件以在动画完成时删除

.fade

类。

在此处使用

toogleClass（）

可能不是最佳解决方案。发生的情况是：

启动时，

没有

.fade

类

单击该按钮时，将添加该类，从而启动关键帧动画

但当您再次单击时，它将删除该类

因此，您必须再次单击以重新启动动画

但现在我还没有更好的方法。Nandita的答案实际上也有相同的行为，只是代码多一点

阿里的一个其实是最好的一个：

$("#btn").click(function() {
      $("#cat").addClass("fade");
})

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

---

播放动画事件以在动画制作完成后删除

.fade

类。

即使效果很好，这仍然只是添加然后删除类的另一种方式。这正是我想要的，但我一直在寻找一种使用1个函数来实现这一点的方法。因此，不要在添加类之后再添加

.addClass（）

，然后再添加

.removeClass（）

，想象一下像

.apply（）

这样的东西，它只应用一次类，这样它就不会“保留”类。如果你不想停留在CSS类中，您可以使用jquery.transit插件，只需单击jquery即可应用各种css动画@SirExoticI只是想知道是否有一种方法可以在一个函数中同时应用add-and-removeClass，谢谢你的帮助：）我来看看这个插件。尽管它工作得很好，但它仍然只是添加和删除类的另一种方法。这正是我想要的，但我一直在寻找一种使用1个函数来实现这一点的方法。因此，不要在添加类之后再添加

.addClass（）

，然后再添加

.removeClass（）

，想象一下像

.apply（）

这样的东西，它只应用一次类，这样它就不会“保留”类。如果你不想停留在CSS类中，您可以使用jquery.transit插件，只需单击jquery即可应用各种css动画@SirExoticI只是想知道是否有一种方法可以在一个函数中同时应用add-and-removeClass，谢谢你的帮助：）我来看看这个插件。