1

JQuery ターミナルの例のコードを使用して、コンソール ウィンドウで入力されたアニメーションをエミュレートしています。アニメーションを意図したとおりに動作させることはできますが、アニメーションの進行中、アニメーションが完了するまで特別な HTML 文字が表示されません。たとえば、アニメーションの実行中、コンソールは ' \' ではなく ' ' をレンダリングします。

この問題は、アニメーション化されている div のクラスに割り当てられたスタイルにも適用されます。アニメーションが完了するまで、スタイルは表示されません。

以下は、アニメーション化に使用されるコードです (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"):

この場合、 によって div 出力に割り当てられた「pong」クラスに適用されたスタイルtyped_messageは、テキストの入力が完了するまで表示されません。

アニメーションの実行中にスタイルや特殊文字を表示する方法はありますか?

4

1 に答える 1

0

の代わりに とをtyped使用してアニメーションを少し修正しました (最後のものは $.terminal.length に移動する必要があります)。set_promptinsert$.terminal.substringlength

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 &
                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"/>

それに応じて、サイトの例が更新されました。

于 2017-09-25T07:18:17.550 に答える