vue enter transition не работает должным образом
JSX скомпилируется в React.createElement вызовы , поэтому вам нужно импортировать React, если вы используете JSX.
Вы также должны писать функциональные компоненты без состояния как функции, а не как непосредственно элемент React.
import React from 'react';
const Home = () => (
Home
);
const About = () => (
About
);
export { Home, About };
1 ответ
В вашем CSS есть несколько проблем.
CSS-переходы и CSS-анимации
Переход может быть реализован с использованием либо CSS-переходов или CSS-анимации , Ваш CSS неправильно смешивает два понятия в этом случае.
В частности, ключевые кадры slideIn и правила .section-enter / .section-enter-to эффективно выполняют одну и ту же задачу по перемещению .section в поле зрения. Однако в нем отсутствует правило transition с ненулевым временем, требуемым для анимации изменения, поэтому изменение происходит немедленно. Та же проблема существует для slideOut ключевых кадров и leave правил.
.section-enter {
top: 100vh;
}
.section-enter-to {
top: 0;
}
.section-enter-active {
transition: .5s; /* MISSING RULE */
}
.section-leave {
top: 0;
}
.section-leave-to {
top: -100vh;
}
.section-leave-active {
transition: .5s; /* MISSING RULE */
}
Удаление ключевых кадров и добавление отсутствующих правил (как показано выше) приведет к работающему переходу CSS.
Использование CSS-анимаций
В качестве альтернативы вы можете использовать ключевые кадры с CSS-анимациями, где анимация применяется только по правилам *-active, и правила *-enter / *-leave не используются. Обратите внимание, что ваш вопрос содержал ненужные кавычки в animation-name: 'slideIn';, который является недопустимым синтаксисом и будет игнорироваться (анимация не происходит). Я использую более простое сокращение в следующем фрагменте (animation: slideIn 1s;).
.section-enter-active {
animation: slideIn 1s;
}
.section-leave-active {
animation: slideOut 1s;
}
@keyframes slideIn {
from {
top: 100vh;
}
to {
top: 0;
}
}
@keyframes slideOut {
from {
top: 0;
}
to {
top: -100vh;
}
}
Оптимизация переходов CSS
Вы также можете настроить производительность анимации с помощью translateY вместо перехода top.
/* top initially 0 in .wrapper */
.section-leave-active,
.section-enter-active {
transition: .5s;
}
.section-enter {
transform: translateY(100%);
}
.section-leave-to {
transform: translateY(-100%);
}