Ufdjrw

Okay so I have been trying to wrap my head around this for such as longtime now so I've turned to Stack Overflow for help! Essentially, I am using NuxtJS as the frontend framework for a website I'm building for a client. I have a transition property in my Nuxt.config.js file

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);
 
 ,

I am wanting to move this code inside one of my Layouts since, I need this transition to be layout specific rather than global. I've tried moving this inside one of my layouts by doing the below. However, this didn't work? Is this even possible? I found a git feature request on the Nuxt JS Github page however, the issue has been closed 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>

It is actually quite easy to have different transitions for different layouts. I will say this with the caveat that I can make it work with what I know, which is basic old vanilla css and I really have no idea what your TweenMax and so forth up above is doing. I will show you an example of how I do it and I'm sure you'll be able to tailor it to your needs.

If I want a universal transition I'd set it up like this:

//nuxt.config.js
transition:
 
 name: 'fade',
 mode: 'out-in'
 ,

and a global css file, let's say 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);
 

Now if I want to tailor a transition to a specific layout I'll remove the styles from main.css and put them in the style section of the layout file:

//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>

Each layout file must keep the naming set up in nuxt.config but otherwise it works fine. The only limitation is there is no transition if going from one layout to another.