Vue.JS循环

Question

我已经尝试了每个循环的vue过渡和经典jQuery，但没有任何作用。如果我正在创建这样的项目列表：

<ul id="goal-list" class="item-list" >

 <li v-for="item in list" class="goal" transition="bounce">
        <img :src=" 'https://s3.com/' + item.badge_image ">
        <h3 >{{ item.badge_social }}</h3>
        <div class="line">
            <div class="line-percent" transition="progress" :style="{ 'width' : (item.badge_progress /  item.badge_goal) * 100 + '%'}"></div>
        </div>

    </li>

    <infinite-loading :on-infinite="onInfinite" :distance="distance"  spinner="waveDots" >
                <span slot="no-more">
                    Sorry, we reached the end. 
                </span>
    </infinite-loading>

        </ul>

如何设置line-percent的宽度动画？基本上这些是我想要为用户从0宽度到当前百分比（当前宽度吐出）的进度动画的目标。在我搬到Vue.js之前很容易：

设置一个数据属性来存储我想要设置动画的每个元素的宽度，然后输入：

$('.goal').each(function( index ) {

  var percent = $(this).find('.line').attr('data-percent');

  $(this).find('.line-percent').animate({
    width:'100%'
  },3000);
});