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

【问题标题】：Animate / apply Transition addClass and removeClass in jQuery?在jQuery中动画/应用Transition addClass和removeClass？
【发布时间】：2017-12-06 16:55:46
【问题描述】：

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

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

在Jquery documentation website，我看到有一个动画函数用于为事物设置动画。在我的情况下可以使用该功能吗？

更新：我还尝试在 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;
    }

【问题讨论】：

可以在css中搜索transition。然后添加和删除该类可以触发该动画。是的，您可以使用 jquery 动画功能，它有很多可以设置的属性，只需阅读他们的文档即可。
@user5014677 我已经应用了 css 动画，但它们不起作用。
您无法转换 display 属性...这可能是这个问题的核心。

标签： javascript jquery css animation jquery-animate

【解决方案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;
}

【讨论】：

我不知道为什么过渡不起作用。我试过了。
更新 HTML 是什么意思？查看我的代码：jsfiddle.net/L0ar3r86/2

【解决方案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
}

【讨论】：

.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; } 转换不起作用。我不知道为什么。
使用 .slider div.active 代替 div.active
没用。即使我删除了 div 并使用了 .slider img。这是小提琴：jsfiddle.net/L0ar3r86/2
它因为显示，你需要使用可见性来代替，像这样：jsfiddle.net/za3a52s0 它不是一个完美的解决方案，但你应该能够使用它
感谢您告诉我这个秘密 :)

【解决方案3】：

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

【讨论】：

可以添加 .slider img{ width:0px} 和 img.active{ width:480px;}

【解决方案4】：

从不同用户的 cmets 中，我了解到 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 的创建者给了我这个想法。

【讨论】：