title: Best practice for altering animated class after ajax in javascript
body: <p>I have an application that performs an ajax request and sets a class on an element, which in turns changes the background colour and does a small scale transform.  I'm using Vue.js and the <code>erroredSave</code> property is the property that sets the class.</p>
  
  <p>The relevant code is as such:</p>
  
  <pre><code>this.erroredSave = false
  
  this.$http.post('some/url/', params)
  .then((data) =&gt; {
      // ALL GOOD
  })
  .catch((errors) =&gt; {
       this.erroredSave = true
  })
  </code></pre>
  
  <p>If I perform the process over and over, the animation often doesn't take place because the request performs very quickly and I think JS doesn't have the time it requires to unset the class completely.  I think...</p>
  
  <p>I have to set a small timeout delay before I perform the request or the css animation won't take place.</p>
  
  <p>So my code ends up as:</p>
  
  <pre><code>this.erroredSave = false
  
  setTimeout(() =&gt; {
      this.$http.post('some/url', params)
      .then((data) =&gt; {
          // ALL GOOD
      })
      .catch((errors) =&gt; {
          this.erroredSave = true
      })
  }, 10)
  </code></pre>
  
  <p>I'm not sure why the setTimeout is required.  Can anyone tell me why?  Is there a standard/better practice for this type of thing?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>SCSS for the error elements.  This is actually performed on table rows if that makes any difference.</p>
  
  <pre><code>&amp;.error_row
  {
      background: linear-gradient(#ffe0e0 10%, #ffcccc 100%) !important;
      animation: scaleSuccess 0.25s linear;
      transform-origin: center center;
      color: $red;
  
      @keyframes scaleSuccess {
          50%
          {
              transform: scale(1.05);
          }
  
          100%
          {
              transform: scale(1);
          }
      }
  }
  </code></pre>
  
  <p>The animations do fire upon first cal.  However, any additional calls that result in errors require the small timeout to see the animations perform.</p>