title: How to add transition to JavaScript toggle class
body: <p>I was making a toggle class in JavaScript in which I have a div which toggles its class on mouse hover.  One of the classes of the div has a colored background and the other one has an image.  The problem is that the image comes in an instant and does not transit smoothly </p>
  
  <p>My css code is:</p>
  
  <pre><code>.container{
  }
  
  .first{
      height: 100%;
      width: 33%;
      position: absolute;
      background-color: #ecf0f1;
      top: 0px;
      left: 0px;
      background-color: none;
      -webkit-transition: all 0.5s ease-in-out;
  }
  .sec{
      height: 100%;
      width: 33%;
      position: absolute;
      background-color: #ecf0f1;
      top: 0px;
      left: 0px;
      z-index: 5;
      background: url(1.jpg);
      background-color: none;
      -webkit-transition: all 0.5s ease-in-out;
  } 
  </code></pre>
  
  <p>My HTML code is:</p>
  
  <pre><code>&lt;div id="container" class="first"&gt;&lt;span&gt;HELOO&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and finally my JavaScript is:</p>
  
  <pre><code>this.classList.toggle('first');
          this.classList.toggle('sec');
          document.getElementById('#container').style.WebkitTransition = 'all 0.5s';
      }
      document.querySelector('#container').addEventListener('mouseenter', a )
      document.querySelector('#container').addEventListener('mouseout', a )
      document.getElementById('#container').style.WebkitTransition = 'all 0.5s';
  </code></pre>