Question

我试图在左边添加一张幻灯片＆＃39;动画到班级.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/

Answer 2

只需更改0值大于0的settimeout，例如我使用1毫秒。

变化：

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

要：

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

现在它运作正常。

编辑：我不确定您要查找的动画是什么，但当我删除$(".current_msg").hide();并增加延迟时，它会根据您的需要运行。

FIDDLE

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

2 个答案: