부에 있는 원소들.JS 전환 그룹이 이동 중에 제대로 애니메이션화되지 않음

부에 있는 원소들.JS 전환 그룹이 이동 중에 제대로 애니메이션화되지 않음

나는 Vue.js 2에서 애니메이션과 함께 안드로이드의 토스트 스타일의 컴포넌트를 구현하려고 한다.전환에 필요한 css는 다음과 같다.

.toast-enter-active {
    opacity: 0;
    transition: all 1s ease-out;
}
.toast-enter-to {
    opacity: 1;
}
.toast-leave {
    opacity: 1;
transition: all .7s ease-out;
}
.toast-leave-to {
    opacity: 0;
}

그toast-enter전환이 좋아 보인다 - 목록이 위로 이동하고 요소가 희미해지지만 요소가 제거되면 어떤 이유로 제거될 요소가 아래로 점프한 다음 페이드 아웃된다.

여기 보이는 것이 있다: jsFiddle

나는 그 문제를 알아냈다.v-for는 인덱스를 키로 사용하기 때문에 단순히 요소를 재활용하는 것이다.각각에 ID 필드를 추가해 해결했다.toast이를 키로 사용:

템플릿 표시:

        <div 
            v-for="(toast, index) in toasts"
            :key="toast.id"
            :class = "['toast',toast.type]"
        >

직접 토스트:

        {text:'1 test',type:'info', id:1},
        {text:'2 test',type:'info', id:2},
        {text:'3 test',type:'info', id:3},

업데이트된 jsFiddle

참조URL: https://stackoverflow.com/questions/42953934/elements-in-vue-js-transition-group-are-not-animating-properly-on-leave