Vue. js анимация: ввод после выхода и не одновременно

Question

У меня есть два компонента и анимация постепенного появления / исчезновения для них. На короткое время оба компонента существуют на странице с разной прозрачностью, а полоса прокрутки появляется и исчезает. Есть ли способ избежать этого? Способ запустить анимацию постепенного появления только после того, как анимация постепенного исчезновения сделана?

Анимация:

.view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}

.view-enter-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    transition-delay: 0.5s; /* Increasing this doesn't seem to work */
}

.view-enter, .view-leave-to {
    opacity: 0.5; /* It should be 1, but setting it to 0.5 allows you to see exactly what's happening */
}

.view-enter-to, .view-leave {
    opacity: 1;
}

Любая помощь будет очень цениться !

Answer 1

Для дальнейшего уточнения моего комментария: VueJS компоненты перехода поддерживают свойство mode , где вы можете указать последовательность переходов при переключении между двумя элементами.

Поскольку вы не хотите, чтобы оба элемента появлялись одновременно при переходе одного из них к другому, вы должны использовать:

mode="out-in"

На основании документации:

out-in: текущий элемент переходит сначала, затем, когда завершено, новый элемент переходит в.