如何使NuxtJS转换布局具体而非全局？

Question

好的，所以我一直试图把这个问题包括在内，比如很长时间，所以我转向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);
    }
  },

我想在我的一个Layouts中移动此代码，因为我需要将此转换为特定于布局而不是全局。我已经尝试通过以下操作在我的一个布局中移动它。但是，这不起作用？这甚至可能吗？我在Nuxt JS Github页面上找到了一个git功能请求但问题已被关闭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>

Answer 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中保持命名设置，否则它可以正常工作。唯一的限制是，如果从一个布局转到另一个布局，则没有转换。