Как я могу сделать свой макет перехода NuxtJS специфичным, а не глобальным?
Похоже, ваша проблема может быть описана в терминах рекурсии:
Если у вас есть n списков из списка: int1 list1 размера m и list2, ... list n
- генерируют комбинации X для списка2 в n (поэтому списки n-1)
- для каждой комбинации, вы генерируете m новых для каждого значения списка 1.
- базовый случай равен список одного списка int, вы просто разделили все элементы в списках одиночных элементов.
, поэтому со списком (список (1,2), список (3), список (4, 5) )) результатом вашего рекурсивного вызова является List (List (3,4), List (3,5)), и для каждого вы добавляете 2 комбинации: List (1,3,4), List (2,3,4) , Список (1,3,5), Список (2,3,5).
1 ответ
На самом деле довольно легко иметь разные переходы для разных макетов. Я скажу это с оговоркой, что я могу заставить его работать с тем, что я знаю, который является основным старым ванильным CSS, и я действительно понятия не имею, что делает ваш TweenMax и так далее выше. Я покажу вам пример того, как я это делаю, и я уверен, что вы сможете адаптировать его под свои нужды.
Если бы я хотел универсальный переход, я бы настроил его так:
//nuxt.config.js
transition:
{
name: 'fade',
mode: 'out-in'
},
и глобальный файл CSS, скажем, main.css
//main.css
.fade-enter-active {
animation: acrossIn .30s ease-out both;
}
.fade-leave-active {
animation: acrossOut .30s ease-in both;
}
@keyframes acrossIn {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes acrossOut {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
Теперь, если я хочу адаптировать переход к определенному макету. Я удалю стили из main.css и поместу их в раздел стилей файла макета:
//default.vue
<style>
.fade-enter-active {
animation: acrossIn .30s ease-out both;
}
.fade-leave-active {
animation: acrossOut .30s ease-in both;
}
@keyframes acrossIn {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes acrossOut {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
...
</style>
Каждый файл макета должен сохранять имя, заданное в nuxt.config, но в остальном работает нормально. Единственным ограничением является отсутствие перехода при переходе от одного макета к другому.