JQueryのターミナルタイプアニメーションで、アニメーションが完了するまで特殊なHTML文字やクラススタイルが表示されない

Question

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

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

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); 
}); 

、それが呼び出されています方法の例：以下

は（jQueryのターミナル例ページから適合）アニメートするために使用されるコードであり、この場合

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

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

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

Answer 1

は少し（その最後の1は$ .terminal.lengthに行く必要がある）も$.terminal.substringとlength、set_prompt代わりのinsertを使用してtypedアニメーションを修正しました。

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

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