javascript - Fading in and out text in block -

i have block content being dynamically changed script , want content not change instantly, fade out , fade in new content. want done without jquery — pure js , css. trying in such way: i've defined transparent , opacle classes in css transition set 2s, , wanna toggle classes block content when content changes. expect should smoothly fade out old content , fade in new content. in fact content changes instantly. css:

.non-opacle {     opacity:0;     transition: opacity 2s linear; } .opacle {     opacity:1;     transition: opacity 2s linear; } 

html

       <div class="alert alert-info" id="wrapper">             <p id="text-box">…</p>         </div> 

js

var textbox = document.getelementbyid('text-box'); window.onload = function () {     var failcounter = 0;     var current = notes[math.floor(math.random() * 12)];     textbox.classname = 'opacle';     textbox.innerhtml = '…';     function keyclicked(event) {         if (event.target.classname.split(' ')[1] === current) {             textbox.classname = 'non-opacle';             textbox.innerhtml = '*some altered content*';             textbox.classname = 'opacle';     … 

in js set content wrapper block 'opacle' class initial content, , on conditions, set 'non-opacle', change block's innerhtml place relevant content, , set class 'opacle'. no animation occurs( doing wrong?

your problem you're adding , removing opacity @ same time, before initial transition has had time complete.

what need delay changing of innerhtml , resetting of opacity until transition has completed.

here's simple looping example illustrate principle, important part note settimeout.

var p=document.getelementbyid("change"),text=["one","two","three","four","five"],x=0,interval=setinterval(function(){      x++;if(x===text.length)x=0;      p.classlist.add("hide");      settimeout(function(){          p.innerhtml=text[x];          p.classlist.remove("hide");      },500);  },2000);

#change{      color:#000;      font-family:arial;      padding:5px;      transition:opacity .5s linear;  }  .hide{      opacity:0;  }

<p id="change">one</p>