JQuery 终端打字动画在动画完成之前不显示特殊的 HTML 字符或 class 样式

Question

我正在使用 JQuery 终端示例中的代码在控制台中模拟键入的动画 window。我可以让动画按预期工作，但在动画过程中，特殊 HTML 字符直到动画完成后才会显示。例如，当动画为运行时，控制台呈现“\”而不是“

”

此问题也适用于分配给正在动画化的任何 div 的 class 的样式。样式在动画完成后才会显示。

下面是用于动画的代码（改编自 JQuery 终端示例页面）：

var anim = false;
    function typed(finish_typing) {
        return function(term, message, delay, finished, classname) {
            anim = true;
            var prompt = term.get_prompt();
            var c = 0;
            if (message.length > 0) {
                term.set_prompt('');
                var interval = setInterval(function() {
                    term.insert(message[c++]);
                    if (c == message.length) {
                        clearInterval(interval);
                        // execute in next interval
                        setTimeout(function() {
                            // swap command with prompt
                            finish_typing(term, message, prompt, classname);
                            anim = false
                            finish && finish();
                        }, delay);
                    }
                }, delay);
            }
        };
    }

var typed_message = typed(function(term, message, prompt, classname) {
    if (typeof classname === "undefined") { classname = "default"; }
    term.set_command('');
    term.echo(message, {
        finalize: function(div) { div.addClass(classname); }});
    term.set_prompt(prompt);
});

以及如何调用它的示例：

E.match(/^\s*ping\s*$/i)?
    typed_message(N, "PONG", 10, function(){finished = true;}, "pong"):

在这种情况下，应用到由 typed_message 分配给 div 输出的“pong”class 的样式在文本输入完成后才会显示。

有没有办法在动画运行时显示样式或特殊字符？

Answer 1

使用 set_prompt 而不是 insert 稍微修改了 typed 动画，还有 $.terminal.substring 和 length（最后一个需要转到 $.terminal.length).

var anim = false;
function typed(finish_typing) {
    return function(term, message, delay, finish) {
        anim = true;
        var prompt = term.get_prompt();
        var c = 0;
        if (message.length > 0) {
            term.set_prompt('');
            var new_prompt = '';
            var interval = setInterval(function() {
                // handle html entities like &amp;
                var chr = $.terminal.substring(message, c, c+1);
                new_prompt += chr;
                term.set_prompt(new_prompt);
                c++;
                if (c == length(message)) {
                    clearInterval(interval);
                    // execute in next interval
                    setTimeout(function() {
                        // swap command with prompt
                        finish_typing(term, message, prompt);
                        anim = false
                        finish && finish();
                    }, delay);
                }
            }, delay);
        }
    };
}

function length(string) {
   return $('<span>' + $.terminal.strip(string) + '</span>').text().length;
}

var typed_message = typed(function(term, message, prompt) {
    term.set_command('');
    term.echo(message);
    term.set_prompt(prompt);
});
$('body').terminal(function(command, term) {
  typed_message(term, '[[;#fff;;class_name]hello]', 400);
});

body {
  min-height: 100vh;
  margin: 0;
}
.class_name {
  text-decoration: underline;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/css/jquery.terminal.min.css" rel="stylesheet"/>

站点上的示例已相应更新。

JQuery 终端打字动画在动画完成之前不显示特殊的 HTML 字符或 class 样式

JQuery Terminal typing animation not displaying special HTML characters or class styles until after animation completes

jquery-terminal