インラインCSSを使用して幅をアニメートする方法

Question

ページロード時にAPIからのデータを使用して要素の幅をアニメーション化しようとしていますが、私はVue jsを使用しています。私が行ったことは、インラインCSSとAPIデータからの幅の値を適用することです。要素の幅を追加できますが、アニメーションはありません。編集した

Vueのテンプレート：

<li v-for="(stats, index) in teamStats[0]"> 
    <div class="bar"> 
     <span :style="'width:'+ stats +'%;'"> 
      {{stats}} 
     </span> 
    </div> 
</li> 

サス：

.bar { 
    span { 
     text-align: $l; 
     right: 0; 
     width: 0%; 
     -webkit-transition: width 1s; 
     -moz-transition: width 1s; 
     -o-transition: width 1s; 
     transition: width 1s; 
    } 
} 

Answer 1

はおそらくJavaScript transition hooksを使用する必要があります。ここに例があります。

new Vue({ 
 
    el: '#app', 
 
    
 
    data: { 
 
    stats: [], 
 
    }, 
 
    
 
    created() { 
 
    // Simulate loading data from server 
 
    setTimeout(() => { 
 
     this.stats = [0.1, 0.15, 0.32, 0.55, 0.88, 0.96]; 
 
    }, 500); 
 
    }, 
 
    
 
    methods: { 
 
    onEnter(el) { 
 
     var stat = +el.dataset.stat; 
 
     var index = +el.dataset.index; 
 
     el.style.transitionDelay = index * 0.05 + 's'; 
 
     el.style.width = (stat * 100) + '%'; 
 
     el.style.backgroundColor = `hsl(${50 - 50 * stat | 0}, 100%, 50%)`; 
 
    }, 
 
    }, 
 
});

.bars { 
 
    width: 400px; 
 
} 
 

 
.bar { 
 
    margin: 5px 0; 
 
    height: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.bar.v-enter-active { 
 
    transition: all 1s cubic-bezier(0, 1, 0.5, 1); 
 
} 
 

 
.bar.v-enter { 
 
    /* Needs !important to override inline styles */ 
 
    opacity: 0; 
 
    width: 0% !important; 
 
    background-color: hsl(50, 100%, 50%) !important; 
 
}

<script src="https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <transition-group tag="div" class="bars" @enter="onEnter"> 
 
    <div class="bar" v-for="stat, index of stats" :key="stat" :data-stat="stat" :data-index="index"> 
 
     {{ (stat * 100 | 0) }}% 
 
    </div> 
 
    </transition-group> 
 
</div>