在 jQuery 中动画/应用 Transition addClass 和 removeClass？

Question

我是 jQuery 和 javascript 的新手，通过在下一张幻灯片上添加和删除 class 'active' 来制作一个简单的滑块，它工作正常但看起来很丑，因为没有动画。有什么方法可以使添加和删除 class 的过程动画化吗？喜欢：

$('#next').on('click', function(){
    $('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})

在 Jquery documentation website 我看到有一个 animate 函数可以用来制作动画。在我的情况下可以使用该功能吗？

更新：我还尝试在 div 和 div.active 上应用 CSS 转换，但没有用。

Css:

   .slider div {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    div.active {
        display: inline-block;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

Answer 1

.active {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 2

你不能真正为 addClass 和 removeClass 设置动画，但你可以添加一个转换

但你可以使用一些 css:

.item {   
   opacity: 0
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item.active{
   opacity: 1
}

Answer 3

在您的情况下，您可以使用过渡来代替动画 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 4

从不同用户的评论中我了解到 css 过渡不能应用于 display: none 元素。因此，我没有显示 none，而是应用了 height 0px; opacity: 0;，这对我来说效果很好。

.slider img{
 height: 0px;
 opacity: 0;
 display: block;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

.slider img.active{
 height: 360px;
 opacity: 1;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

感谢 this fiddle 的作者给了我这个想法。

在 jQuery 中动画/应用 Transition addClass 和 removeClass？

Animate / apply Transition addClass and removeClass in jQuery?

javascript

css

jquery

animation

jquery-animate