附加后删除类

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。

** 编辑 **

这是一个sn-p：

// 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

您可以使用“回调”函数来实现此目的，但不能在 '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();
});