javascript - 向延迟的动态元素添加过渡？

Question

我正在尝试向类 .bot-dialog 添加“向左滑入”动画。此类是动态生成的，我的 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();
    });

用于对话框/过渡的 CSS

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

这是一个 jsfiddle 显示问题。

感谢您的帮助!

Answer 1

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

我已经将过渡从 all 更改为 left 以便测试立即出现，如果您想要平滑的不透明度，请将其更改回 all

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