【vue】リストの追加削除などでアニメーションさせる

前回は、項目を1個だけ表示する部分のトランジションを紹介しました。次はリストの項目を増減させる場合のトランジションを見ていきます。

1つの項目のトランジションは下の記事にあります。

transition-groupでアニメーションさせる

今回は、transition-groupを利用します。transitionは中の要素を1つだけ表示しましたが、transition-groupは複数表示できます。

まずは、項目を増やすときに増やした項目だけアニメーションしてみます。

transition-groupにnameを付けるなど、前回と全く同じです。

<transition-group name="fade">
    <span v-for="v in list" :key="v">
        {{ v }}
    </span>
</transition-group>

.fade-enter-active {
    transition: opacity 1s ease;
}

.fade-enter-from {
    opacity: 0;
}

See the Pen by Totori (@souki202) on CodePen.

ここで、group内でforループする際には、必ず:keyが必要です。また、key属性はグループ内で重複しないように、かつkeyと対応する要素が変わったりしないようにする必要があります。(別のグループとは被っても大丈夫です。)

keyは、どの要素に変化があったかをvueが追いかけるためのものです。つまり、keyと要素は1対1でひも付きます。そのため、番号を振り直したり、被っていたりするとバグります。

こちらも前回と同様に、{name}-leave-toなどを用います。なにか特別なことをする必要もありません。

<transition-group name="fade">
    <span v-for="v in list" :key="v">
        {{ v }}
    </span>
</transition-group>

.fade-leave-active {
    transition: opacity 1s ease;
}

.fade-leave-to {
    opacity: 0;
}

しかし、消える瞬間にパッと移動するため、なめらかではありませんね。

transition-groupでは、項目の表示非表示に、項目の位置に変化があった場合もアニメーションできます。

{name}-moveを使用することで、項目移動時のCSSを指定できます。moveは、項目の追加削除や、位置の入れ替わりなどで移動が発生した瞬間時に付与されます。

.fade-move {
    <!-- transformにtransitionを付けることで、移動先になめらかに移動できる -->
    transition: transform 0.5s ease;
}

See the Pen by Totori (@souki202) on CodePen.

注意点として、特に項目削除時は、そのままでは完全消滅するまで移動が始まりません。完全に消えるまでは位置の変化が無いためです。この場合、position: absolute;を指定するなど、高さや幅を0にする工夫が必要です。

inlineではmoveが動作しません。必ずinline以外を利用してください。

block、inline-block、flexなどです。

リストをtransitionしたい場合、transition-groupを用います。

アニメーションさせる際は、削除時にうまく位置が変化するよう、消える処理の開始直後に高さや幅を0にするなどして、他の要素が移動するように工夫する必要があります。