如何为 addClass 和 removeClass 动画获得不同的过渡延迟时间？答案

【问题标题】：How to get different transition-delay times to addClass and removeClass animations?如何为 addClass 和 removeClass 动画获得不同的过渡延迟时间？
【发布时间】：2017-09-09 12:47:00
【问题描述】：

使用 addClass 和 removeClass 我有以下内容：

$("#sidebar-bottom-feature").addClass("display-none");

这会按预期淡化元素。

那么当涉及到将元素替换回来时

$("#sidebar-bottom-feature").removeClass("display-none");

#sidebar-bottom-feature {
    border-radius: 0;
    border: 0;
    padding: 10px 40px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    transform: 1s all;
    height: 80px;
    margin-bottom: -80px;
    background-color:#F1F1F1
}
.display-none {
    opacity: 0  
}

我希望在1s all 之后发生淡出，但在延迟 3 秒后发生淡入（removeClass）。如果您将：3s all 添加到 display-none，它将为 addClass 和 removeClass 添加 3 秒延迟。

我怎么能有不同的时间？

我确实尝试添加另一个类而不是删除，然后在旧类过渡后删除它，但过渡延迟时间没有变化。

任何指导都会受到极大的欢迎。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以使用setTimeout

 // wait 1 second before hiding the element
setTimeout(function(){
   $("#sidebar-bottom-feature").addClass("display-none");
}, 1000);

// wait 3 seconds before showing the element
setTimeout(function(){
   $("#sidebar-bottom-feature").removeClass("display-none");
}, 3000);

您也可以使用.delay()。

如果你使用显示和隐藏，你甚至不需要添加一个类：

$("#sidebar-bottom-feature").delay(1000).hide(0);
$("#sidebar-bottom-feature").delay(3000).show(0);

【讨论】：