追加后删除一个类

Question

我试图在附加到DOM时滑入元素。像这样：

$("<div class='column column-hiding'>Content</div>")
    .appendTo(container)
    .removeClass("column-hiding");

并尝试过：

$("<div class='column'>Content</div>")
    .appendTo(container)
    .addClass("column-showing");

和样式定义是这样的：

.column {
     transform: translateX(0%);
     transition: all 0.3s ease-out;
 }

 .column-hiding {
     transform: translateX(-100%);
     transition: all 0.3s ease-out;
 }

要么

.column {
     transform: translateX(-100%);
     transition: all 0.3s ease-out;
 }

 .column-showing {
     transform: translateX(0%);
     transition: all 0.3s ease-out;
 }

这样它立即显示列。这个方法在延迟使用setTimeout延迟后工作，但是还有其他选项我可以用来确定应该添加/删除类的时间吗？我也尝试在样式中添加一个transition-delay，它仍然立即显示。

感谢您提前的答案。

注意：我正在使用jQuery 3。

**编辑**

这是一个片段：

// this animates instantly

$("<div class='column column-hiding'>Content</div>")
  .appendTo($("#container"))
  .removeClass("column-hiding");

// this is working

var column = $("<div class='column col2 column-hiding'>Content</div>")
  .appendTo($("#container"));
setTimeout(function(){
  column.removeClass("column-hiding");
}, 500);

#container {
  width: 100px;
  height: 300px;
  background: silver;
  overflow: hidden;
}

.column {
  transform: translateX(0%);
  transition: all 0.3s ease-out;
  background: blue;
  width: 100px;
  height: 100px;
}

.column-hiding {
  transform: translateX(-100%);
  transition: all 0.3s ease-out;
}

.col2 {
background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Answer 1

您可以使用'callback'函数来实现这一点但不能在'appendTo'方法中使用回调...有一个名为$.when()的jquery方法来执行回调函数...并在这里找到代码的工作示例https://jsfiddle.net/xpvt214o/738145/。

var column = $("<div class='column col2 column-hiding'>Content</div>");

$.when(column.appendTo($("#container"))).then(function(){
    column.removeClass("column-hiding");
});

要么

使用delay()和queue(), dequeue()方法获得此输出... https://jsfiddle.net/xpvt214o/738391/

$("<div class='column column-hiding'>Content</div>")
 .appendTo($("#container"))
 .delay(1000)
 .queue(function(){
   $(this).removeClass("column-hiding").dequeue();
});