Removing a class after appending

Question

I'm trying to slide in an element when appended to the DOM. Like this:

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

and also tried:

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

and the style definitions are like this:

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

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

or

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

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

This way it instantly displays the column. This method works after delaying with a setTimeout delay, but is there any other option that I can use to pinpoint the time when the classes should be added/removed? I also tried adding a transition-delay to the styles, still it shows instantly.

Thanks for your answers in advance.

Note: I'm using jQuery 3.

** Edit **

Here is a snippet:

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

You can use 'callback' function to achieve this but cannot use callback in 'appendTo' method... there is a jquery method called $.when() to execute callback functions... and find the working example of your code here 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

Use delay() and queue(), dequeue() methods to get this output... https://jsfiddle.net/xpvt214o/738391/

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