programing

transition-group 속성 또는 소품 설정 방법

goodsources 2022. 9. 12. 11:54
반응형

transition-group 속성 또는 소품 설정 방법

Vuejs에서 소품 또는 속성을 설정하려면 어떻게 해야 합니까?transition-group예를 들어, 이 스니펫이 있습니다.

<v-layout :row="true" wrap>
  <v-card v-for="(file, id) in files" :key="id">
   ... 
  </v-card>
</v-layout>

그럼 카드 리스트의 트랜지션을 애니메이션화하고 싶은데, 이렇게 변환할 수 있나요?

<transition-group name="card-in-out" tag="v-layout" :row="true" wrap>
  <v-card v-for="(file, id) in files" :key="id">
   ... 
  </v-card>
</transition-group>

트랜지션 그룹의 API를 보면 소품 전달 방법이 없는 것 같습니다.처럼tag이행 그룹이 DOM에 배치되었을 때 이행 그룹의 이름을 변경할 수 있습니다.인수인계 그룹 전체를 정리하고<v-layout row wrap>

<v-layout row wrap>
 <v-flex xs12>
   <transition-group name="card-in-out">
    <v-card  
     v-for="item in items"
     :key="item" 
     class="list-item"
    >
    <v-card-title primary-title>
      <div class="headline">Card Title {{ item }}</div>
    </v-card-title>
    </v-card>
  </transition-group>
 </v-flex>
</v-layout>

언급URL : https://stackoverflow.com/questions/46901235/how-to-set-attributes-or-props-in-transition-group

반응형