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

我想将这段代码移入我的一个版式中，因为我需要这种转换是特定于版式的，而不是全局的。我尝试通过执行以下操作在我的一种布局中移动它。但是，这行不通吗？这有可能吗？我在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中保持命名设置，但否则可以正常工作。唯一的限制是，如果要从一种布局转到另一种布局，则不会发生过渡。

如何使我的NuxtJS过渡版面特定而不是全局？

1 个答案: