Javascript 向延迟的动态元素添加转换？

我正在尝试将“向左滑入”动画添加到类

.bot对话框
。这个类是动态生成的，我的setTimeout函数似乎没有发挥应有的作用

我注意到的一个问题是，只有当输入指示器处于活动状态时，它才起作用。这是我的密码：

生成我的机器人对话框

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

下面是一个显示问题的

谢谢你的帮助
 只需将settimeout从
0
值更改为大于
0
，就像我使用的
1
毫秒一样

更改：

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

致：

现在它工作得很好

编辑：我不确定您要找的动画是什么，但当我删除
$（“.current_msg”）.hide（）时
并根据需要增加其工作的延迟

问题是，您正在隐藏它，这会将它设置为
display:none
，从而影响css转换。只需使用不透明度即可

我已将转换从
all
更改为
left
，以便测试立即显示，如果您希望平滑不透明度，请将其更改回
all

什么意思？只有当输入指示器处于活动状态时，它才起作用？为什么要使用超时功能？@madalinivascu是一个删除指示器的小提琴版本。使用超时是因为我正在尝试等待1200毫秒以激活转换，但这仍然只是在屏幕上闪烁div。因此，您想设置bot对话框div左侧位置的动画吗？这就是我得到的吗？我已经尝试过了，它仍然只在
left:200px处闪烁屏幕上的div这对我有用，谢谢你的帮助。我最初使用的是display none，所以指示器显示在右边，我只需要摆弄一些css，但这是完美的！我相信当您
display:none
it时，添加过渡，然后
display:block
it（或任何可见性）它将跳过动画并直接到达最终目的地。
var $to = $(".bot-dialog");
    setTimeout(function() {
        $to.css("left", 200 + "px");
    }, 0);

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