Каково различие между отправкой - выпуск или - вытекает в Пул Автовыпуска?

На самом деле довольно легко иметь разные переходы для разных макетов. Я скажу это с оговоркой, что я могу заставить его работать с тем, что я знаю, который является основным старым ванильным 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, но в остальном работает нормально. Единственным ограничением является отсутствие перехода при переходе от одного макета к другому.