Как я могу сделать свой макет перехода NuxtJS специфичным, а не глобальным? - PullRequest
Новая
       44

Как я могу сделать свой макет перехода NuxtJS специфичным, а не глобальным?

2 голосов
/ 05 марта 2019

Хорошо, поэтому я пытался обернуть это вокруг себя так долго, поэтому я обратился к Stack Overflow за помощью!По сути, я использую NuxtJS в качестве среды для веб-сайта, который я создаю для клиента.У меня есть свойство перехода в моем Nuxt.config.js файле

Nuxt.config.js

transition: {
    mode: 'out-in',
    css: false,
    beforeEnter: function(el) {
        console.log('Pre Enter');
        TweenMax.set(".transition--layer",{ transformOrigin: '100% 0%',  yPercent: 0}) 
        TweenMax.set(".transition-layer--text h2 span", {opacity:0.75, yPercent:0,force3D:true});     
    },
    enter: function (el, done) {
        console.log('Enter');    
        TweenMax.to(".transition-layer--text h2 span", 0.5, {opacity:0.75, yPercent:-100, delay:0.4, ease:Power3.easeInOut, force3D:true}, 0.2);
        TweenMax.to(".transition--layer", .75, {delay:1, yPercent: -100, ease: Power3.easeInOut})
        done()
    },
    beforeLeave: function (el) {
        console.log('Before Leave');    
        TweenMax.set(".transition--layer",{ transformOrigin: '100% 0%',  yPercent: 100})      
    },
    leave: function (el, done) {
        console.log(' Leave');
        var done = done;
        TweenMax.to(".transition--layer", .75, { yPercent: 0, ease: Power3.easeInOut})
        TweenMax.fromTo(".transition-layer--text h2 span", 0.5, {opacity:0, yPercent:100, force3D:true}, {delay:0.75, ease:Power3.easeInOut, opacity:0.75, yPercent:0,force3D:true, onComplete: function () { console.log('leave'); done() }}, 0.2);
    }
  },

Я хочу переместить этот код в один из моих макетов, так как этот переход должен быть макетомспецифический, а не глобальный.Я попытался переместить это в одном из моих макетов, выполнив следующие действия.Тем не менее, это не сработало?Это вообще возможно?Я нашел запрос функции git на странице Nuxt JS Github, однако проблема была закрыта https://github.com/nuxt/nuxt.js/issues/1054

<script>    
export default {
transition: {
        mode: 'out-in',
        css: false,
        beforeEnter: function(el) {
            console.log('Pre Enter');
            TweenMax.set(".transition--layer",{ transformOrigin: '100% 0%',  yPercent: 0}) 
            TweenMax.set(".transition-layer--text h2 span", {opacity:0.75, yPercent:0,force3D:true});     
        },
        enter: function (el, done) {
            console.log('Enter');    
            TweenMax.to(".transition-layer--text h2 span", 0.5, {opacity:0.75, yPercent:-100, delay:0.4, ease:Power3.easeInOut, force3D:true}, 0.2);
            TweenMax.to(".transition--layer", .75, {delay:1, yPercent: -100, ease: Power3.easeInOut})
            done()
        },
        beforeLeave: function (el) {
            console.log('Before Leave');    
            TweenMax.set(".transition--layer",{ transformOrigin: '100% 0%',  yPercent: 100})      
        },
        leave: function (el, done) {
            console.log(' Leave');
            var done = done;
            TweenMax.to(".transition--layer", .75, { yPercent: 0, ease: Power3.easeInOut})
            TweenMax.fromTo(".transition-layer--text h2 span", 0.5, {opacity:0, yPercent:100, force3D:true}, {delay:0.75, ease:Power3.easeInOut, opacity:0.75, yPercent:0,force3D:true, onComplete: function () { console.log('leave'); done() }}, 0.2);
        }
      },

}
</script>

1 Ответ

1 голос
/ 07 марта 2019

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

...