vue templates transition-groups

Question

간단한 목록을 만들었을 때 전환 작업이 이제는 compontents 및 템플릿을 사용하여 전환이 더 이상 작동하지 않습니다. 이유를 설명 할 수있는 사람이 있습니까?

각 항목이 애니메이션으로 변하고 하나의 전환에서 모든 항목을 처리하는 것처럼 보입니다.

내가 사용 vue2.js

내 CSS 그것은이 방법으로 노력하고 있습니다 보인다

 <div > 
<transition-group name="flip-list" tag="div" > 

       <div v-for="item in accFilters" class="box" v-bind:key="item" > 

        <h1>{{ item.name }}</h1> 
        <img :src="item.imageUrl" style="width:200px;"> 
        <p>{{item.extract}}</p> 
        {{ item.holidayType }} 

        <div is="task" v-for="avail in item.avail" v-bind:item="avail" > 

        </div>  


       </div> 
     </transition-group> 

     </div> 

    </template> 

Answer 1

.flip-list-move { 
    transition: transform 1s; 
} 

내 마크 업. 모든 항목은 애니메이션으로 재생됩니다. ther 항목