반응형
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
반응형
'programing' 카테고리의 다른 글
사용자 'root'@'localhost'에 대한 액세스가 거부되었습니다(암호: YES 사용). 권한이 없습니다. (0) | 2022.09.12 |
---|---|
봄철 순환 의존성 (0) | 2022.09.12 |
Guice의 Assisted 사용방법주사? (0) | 2022.09.12 |
2개의 열이 있는 SQL:상위 3명의 사용자로부터의 커미션 및 커미션 합계 (0) | 2022.09.12 |
Vue.js 구문 오류(SCRIPT1003) IE11 이하 (0) | 2022.09.12 |