添加后删除 class

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 延迟后有效，但是我可以使用任何其他选项来确定类应该是 added/removed 的时间吗？我还尝试在样式中添加 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();
});

添加后删除 class

Removing a class after appending

css

jquery

transition

show-hide