소개

Vue.js의 편리한 기능 중 하나의 transition. 이번은 그쪽을 사용해 Bootstrap의 카드를 늘어놓는 타입의 표시에 대해서 transition을 걸어 가고 싶습니다.

구체적인 상황

소스 코드

song.vue

<div class="container">
    <transition-group class="row"> <!--ここをdivから変える-->
        <div class="card border-info col-lg-4 col-sm-6" v-for="item in items" :key="item.Artist+item.Title">
             <div class="card-body">
                <h2 class="card-title">{{ item.Title }}</h2>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">アーティスト名：{{ item.Artist }}</li>
                    <li class="list-group-item">ボーカル： {{ item.Vocal.join('、') }}</li>
                    <li class="list-group-item">作詞：{{ item.Word.join('、') }}</li>
                    <li class="list-group-item">作曲：{{ item.Composer.join('、') }}</li>
                    <li class="list-group-item">編曲：{{ item.Arranger.join('、') }}</li>
                    <li class="list-group-item">作品：{{ item.TieUp[0] }}</li>
                    <li class="list-group-item">ブランド：{{ item.Brand[0] }}</li>
                    <li class="list-group-item">ジャンル： {{ item.Genre.join('、') }}</li>
                </ul>
            </div>
        </div>
    </transition-group> <!--ここをdivから変える-->
 </div>

song.css

.v-enter-active, .v-leave-active {
  transition: opacity .5s;
} /*遷移に0.5秒かける*/

.v-enter, .v-leave-to{
  opacity: 0;
} /*現れる時の最初と消える時の最後のopacityを0に指定*/

간단한 해설

내가 처음 빠져버린 것은 기존의 div 태그를 그대로 두고 transition-group 태그를 넣으려고 했던 곳입니다. 오류는 나오지 않지만 카드 자체가 표시되지 않습니다. class가 row의 곳을 지정해 주는 것이 제일 좋은 느낌일까라고 개인적으로 생각합니다. 그리고 transition-group 사용할 때는 key를 반드시 설정해 주세요. 제대로 표시되지 않습니다.

다음은 css에 관한 것입니다. 사실은 여기에서 지정한 4개 이외에도 .v-enter-to와 .v-leave를 지정하지 않으면 안됩니다만 둘 다 opacity가 1이므로 여기서는 생략할 수 있습니다. 덧붙여서 각각의 CSS 클래스의 의미를 정리하면 다음과 같은 느낌입니다.

v-enter : 표시할 때의 최초 상태

v-enter-active : 표시 할 때 전환 설정

v-enter-to : 표시 할 때의 마지막 상태

v-leave : 지울 때의 최초 상태

v-leave-active : 지울 때 전환 설정

v-leave-to : 지울 때의 마지막 상태

또 이번에는 name을 지정하지 않고 디폴트의 v를 사용했습니다만, 가능하면 name은 지정하는 것이 좋다고 생각합니다. transition-group 태그에서 name 을 지정하고 그때 지정한 name 을 css v로 바꿉니다.

참고문헌

Vue.js의 transition-group에서 목록 애니메이션에 도전

공식 문서: Enter/Leave 및 트랜지션 목록