VueJS - 이행 그룹이 컴포넌트 리스트의 초기 렌더링을 애니메이션화하고 있습니다.이러한 프로포절은 false입니다.

VueJS - 이행 그룹이 컴포넌트 리스트의 초기 렌더링을 애니메이션화하고 있습니다.이러한 프로포절은 false입니다.

과도기 모임에서 이상한 행동을 하고 있어요

다음과 같은 css 이행이 있습니다.

.slide-fade-pop-enter-active {
  transition: all .4s ease-out;
}

.slide-fade-pop-enter {
  background-color: $color-yellow-light;
  transform: translateY(3px);
  opacity: 0;
}

Cart 컴포넌트와 CartItem 서브 컴포넌트가 있습니다.카트 내에는 다음과 같은 카트 아이템이 있습니다.

<transition-group name="slide-fade-pop" tag="ul" class="cart__content">
    <cart-item v-for="(item, index) in items"
               :key="index">
    </cart-item>
</transition-group>

이것은 초기 렌더링 애니메이션을 트리거하고 있습니다. 보시다시피, 저는 "보기" 속성/프로프를 사용하지 않습니다. 문서화된 것처럼 초기 렌더링 애니메이션을 트리거합니다.

CartItem 컴포넌트를 단순한 li(실제로 CartItem)로 전환하면 다음과 같이 됩니다.

<transition-group name="slide-fade-pop" tag="ul" class="cart__content">
    <li v-for="(item, index) in items"
               :key="index">
    </li>
</transition-group>

이행은 의도한 대로 동작합니다.초기 렌더가 없고 이후 목록에 추가된 내용이 애니메이션으로 표시됩니다.

이것은 버그나 기능 중 하나이며, 서브 컴포넌트에 없는 것이 있습니까?

언급URL : https://stackoverflow.com/questions/48811116/vuejs-transition-group-is-animating-initial-render-of-a-list-of-components-eve