Почему элементы появляются в верхнем левом углу с TransitionGroup в Vue 3?

Question

Сейчас я пытаюсь интегрировать анимацию в небольшой компонент, который содержит: заголовок, изображение и блок кнопок.

Правила следующие:

• Изначально у нас есть только заголовок и изображение,
• При наведении курсора на компонент заголовок исчезает ближе к верху, изображение поднимается и занимает свое место, а снизу появляются кнопки,
• Когда мы перестаем наводить курсор на компонент, заголовок снова появляется сверху, изображение возвращается вниз, занимая место кнопок, а кнопки исчезают вниз.

В настоящее время по неизвестной причине компоненты (заголовок и кнопки) систематически поступают из верхнего левого угла страницы. Более того, изображение анимируется только тогда, когда наведение прекращается, а не когда оно начинается.

Вот ссылка на игровую площадку VueJS , чтобы показать вам, как она работает.

Ваша помощь будет очень признательна

Я уже пробовал:

• Тип модификации в TransitionGroup (transition,animation)
• Ставим то же самоеkeyна каждом компоненте, даже если это запрещено официальной документацией , реактивирует анимацию на изображении в начале и в конце.
• С использованиемposition: absolute
• С использованиемtransition-origin
• С использованиемperspective-origin
• Принудительно использовать верхние и левые атрибуты с помощью@beforeLeaveкрюк
• Интегрируйте компонент в файл . Обратите внимание, что компоненты (заголовок и кнопки) появляются в верхнем левом углуiFrame(нет ничего удивительного).

Answer 1

Когда вы используетеv-ifвместоv-show, элементы перестают поступать сверху слева. Также думаюtype="animation"необходим только тогда, когда вы используете CSS-анимацию и переходы вместе, но используете только переходы.

Наконец, вы можете указать, откуда и куда вы хотите их переместить. Чтобы сгладить переход, используйте абсолютную позицию для уходящих элементов, чтобы пространство сразу освобождалось:

      .slide-fade-leave-active{
  position: absolute;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

Вот это на детской площадке . Надеюсь, поможет