vueデジタルラダーソートアニメーション特殊効果

コードセグメント:

<div id="アプリ">
<div class="カード">
<sort-card v-for="(カード, インデックス) (store.state.cards 内)" :key="index" :value="card.value" :sort-index="card.sortIndex" :is-active ="card.isActive" :is-locked="card.isLocked"></sort-card>
</div>
<div class="コントロールパネル">
<h1>バブルソートビジュアライザー</h1>
<button aria-label="リセット" v-if="store.state.done" @click="reset(SORT_ARRAY)">
<i class="fa fa-refresh" aria-hidden="true"></i>
</ボタン>
</div>
</div>
<script type="text/x-template" id="sort-card-template">

<!-- インライン スタイルをバインドし、高さと変換を通じてさまざまな div を表示します -->
<div class="カードラッパー" :data-sort-index="sortIndex" v-bind:style="{高さ: 値 * HEIGHT_INCREMENT + 'px',transform: 'translateX('+sortIndex*100+' %)'}">
<!-- クラスを変更して色を変更します -->
<div class="card" :class="cardClassObject">
<div class="value">{{value}}</div>
</div>
</div>
</スクリプト>