CODEWITHSUNDEEP
javascriptjqueryhtmlcss
knocked loose
knocked loose

Reputation: 3304

Adding transition to delayed dynamic elements?

I'm trying to add a 'slide in to the left' animation to the class .bot-dialog. This class is dynamically generated and my setTimeout function does not seem to be doing justice.

One of the issues I noticed was that it doesn't work ONLY when the typing indicator is active. Here is my code:

Generate my bot dialog

    $("#conversation").html(
        "<div class='bot-log'>" +
        "<span class='bot'>Chatbot: </span>" +
        "<span class='current_msg bot-dialog dialog' style='left:-40px; position:relative;'>TEST" +
        "</span> </div>"
    )

var $to = $(".bot-dialog");
    setTimeout(function() {
        $to.css("left", 200 + "px");
    }, 0);

    $(".current_msg").hide();
    //Add and remove typing indicator when firing typing function
    $(".bot-log:last-child").append(
      '<div class="typing-indicator"><span></span><span></span><span></span></div>'
    );
    $(".typing-indicator").delay(800).fadeOut(function() {
      $(".typing-indicator").remove();
    });

    $(".current_msg").delay(1200).fadeIn(function() {
      $(this).removeClass("current_msg");
      if (typeof callback == "function") callback();
    });

CSS for dialog/transition

.bot-dialog{
  transition:5s all ease;
}

Here is a jsfiddle showing the issue.

Thanks for the help!

Upvotes: 2

Views: 357

Answers (2)

shubham agrawal
shubham agrawal

Reputation: 3541

Just change the settimeout from 0 value greater than 0 like for example I have used 1 millisecond.

Change:

var $to = $(".bot-dialog");
    setTimeout(function() {
        $to.css("left", 200 + "px");
    }, 0);

To:

var $to = $(".bot-dialog");
    setTimeout(function() {
        $to.css("left", 200 + "px");
    }, 1);

And now it works fine.

EDIT : I am not sure exactly what animation you are looking for but when I remove $(".current_msg").hide(); and increase the delay it works as per you want.

FIDDLE

Upvotes: 0

A. L
A. L

Reputation: 12639

The thing is, you're hiding it, which sets it to display: none which affects the css transition. Just use opacity instead.

I've changed the transition from all to left so that the test appears instantly, if you want a smooth opacity, change it back to all

https://jsfiddle.net/Lpdx2a0x/4/

Upvotes: 1

Related Questions