title: How to animate width using inline css
body: <p>I'm trying to animate a width of an element using data from an API upon page load and I'm using Vue js. What I've done is I used inlined css and apply width value (from API data). I'm able to add the element width but it has no animation.</p>
  
  <p><strong>Vue template edited:</strong></p>
  
  <pre><code>&lt;li v-for="(stats, index) in teamStats[0]"&gt;
      &lt;div class="bar"&gt;
          &lt;span :style="'width:'+ stats +'%;'"&gt;
              {{stats}}
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>Sass:</strong></p>
  
  <pre><code>.bar {
      span {
          text-align: $l;
          right: 0;
          width: 0%;
          -webkit-transition: width 1s;
          -moz-transition: width 1s;
          -o-transition: width 1s;
          transition: width 1s;
      }
  }
  </code></pre>