Javascript 将类指定给基本css滑块中的幻灯片

基本上，我有一个非常简单的（进行更改）滑块，它只使用css完成。导航按钮有标签，每个幻灯片都有标签问题是，只有当幻灯片被导航到时，我如何才能向幻灯片中的某些项目添加/删除类。

和滑块一样，当滑块加载时，它们倾向于加载所有内容，我想在幻灯片上添加一些很酷的动画，因此，如果所有内容都在幻灯片一加载，那么就没有意义了

我已经提供了一些滑块的JSFIDLE模型，以及动画类和淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。。然后，我会将它们分配到幻灯片上的不同位

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
  opacity: 0.3;
  background-color: rgba(0,0,0,0.3);


}

---

CSS允许您创建带有过渡和关键帧的动画，而这些过去只能通过JavaScript或Flash实现。不幸的是，使用CSS无法在动画完成时执行回调。使用JavaScript，可以检测CSS转换或动画的结束，然后触发函数

使用JavaScript，我们可以检测transitionend事件；但是，对于跨浏览器支持，我们需要包括其他浏览器的前缀

$(function() {
    //Store a ref to slides
    var $slides = $(".slides");

    //Bind event to the contianed that gets animated
    $(".slide-container")
    .on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){

        // Remove classes from all the elements within the active container that starts with the class 'add-anim'
        $slides.find(".slide-container [class^='add-anim']").removeClass("animated bounceInLeft bounceInUp");

        //Add appropriate classes to the matched elements within the active container
        var $radio = $slides.find(":radio[name='radio-btn']:checked");
        $radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp");
        $radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft");
    });
});

这是你的HTML+JS+CSS

注意：上述解决方案可行，但问题是，根据浏览器的不同，它可能触发两次（即Chrome同时支持WebKittTransitionEnd和transitionend）。不过，有一些方法可以通过检测受支持的事件属性来克服这一问题。更多细节，请参阅

---

希望能有所帮助。

在JS/jQuery中，动画完成后，获取幻灯片的不透明度，并在其为1时添加一个类？有趣的想法。。。。因此，您特别提到类“slideM”，在这种情况下，这可能是一个困难的问题，因为它们都被标记为相同的类名。。所有幻灯片都称为slideM，我想为每张幻灯片上的所有元素添加类。。。atm它们只是图像，但它们将是多个div简言之，您的意思是说将类添加到活动幻灯片中的所有元素，在您的情况下

？