JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<textarea id="text" cols="50" rows="10">ニャーッハッハッハッハァ！！
毛皮の触り心地に騙されたな小僧が！！
    
我は地獄より召喚されし大悪魔、ノルウェージャンフォレストキャット公爵である！
    
貴様には既に我が刻印を刻み込んだ！諦めて下僕になるがよい！</textarea>
<button id="convert">Convert</button>
<a href="#result">show</a>
<a href="#home">hide</a>

<div id="home"></div>
<div id="result" cols="50" rows="10"></div>

CSS

.t {
    opacity:0;
}

#home:target {
}

#home:target ~ #result .t{
    -webkit-transition-duration:0s !important;
    -webkit-transition-delay:0s !important;
}

#result {
    visibility:hidden;
}

#result:target{
    visibility:visible;
}

#result:target .t {
    opacity:1;
    -webkit-transition-property:all;
    -webkit-transition-timing-function:ease-out;
}

JavaScript

window.addEvents({
    'domready': function(){
    
        var html = [];
        
        $('convert').addEvent('click', function(){
            var text = $('text').value;
            var t = 0;
            var d = 0.1;
            
            //console.log(text);
            
            for(var i =0, z = text.length; i < z; i++){
                var str  = text.charAt(i);
                var code = text.charCodeAt(i);
                
                var style = [
                    '-webkit-transition-delay:'+t+'s',   
                    '-moz-transition-delay:'+t+'s',
                    'transition-delay:'+t+'s',
                    '-webkit-transition-duration:'+d+'s',  
                    '-moz-transition-duration:'+d+'s', 
                    'transition-duration:'+d+'s'              
                ];
                
                
                //console.log(str, code, str.match(/\s+/),str.match(/[\n\r]/));
                
                //html.push(new Element('span', {text:text.charAt(i)}));
                
                        console.log(t);
                switch(code){
                    case 10:
                       //console.log(str,code);
                       html.push('<br>');
                        t+=0.2;
                    break;
                    default:
                       html.push('<span class="t" style="'+style.join(';')+'">' + str + '</span>');
                       t+=0.08;
                    break;
                   
                }
                
                
            }
            
            $('result').empty().set('html', html.join(''));
           console.log(html[10]);
        
        });
    }   
});