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");
});

OR

使用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();
});

追加后删除类

1 个答案: