Hi, Is it possible to check to and from inside a transition object? I want to use different transitions depending on where the user came from and are going.
What is the suggested way of doing this? Can I keep all my transitions in some folder and export/import them, using the transition function to check which one to use?
This is a transition i'm using inside one of my page components:
transition: {
mode: 'out-in',
css: false,
enter (el, done) {
let tl = new TimelineMax
let SplitLines = new SplitText('.js-lines', {type: "words" })
let lines = SplitLines.words
TweenMax.set('.js-lines', { perspective: 800 })
function kill () {
SplitLines.revert()
done()
}
tl.staggerFrom(lines, 1.5, {
opacity: 0,
yPercent: 50,
scale: 0.85,
rotationX: -90,
transformOrigin: "center bottom",
ease: Expo.easeOut
}, 0.075, "+=0", kill)
},
leave (el, done) {
TweenMax.to(el, 0.5, { autoAlpha: 0, onComplete: done })
}
}
Would something like this be possible?
export const fromPageOne = {
mode: 'out-in',
css: false,
enter () {
console.log('from page one')
done()
}
}
export const fromPageTwo = {
mode: 'out-in',
css: false,
enter () {
console.log('from page two')
done()
}
}
export const toPagOne = {
mode: 'out-in',
css: false,
leave () {
console.log('to page one')
done()
}
}
export const toPageTwo = {
mode: 'out-in',
css: false,
leave () {
console.log('to page two')
done()
}
}
then in the page component:
transition (to, from) {
return from.name == 'index' ? fromPageOne : fromPageTwo
return to.name == 'index' ? toPageOne : toPageTwo
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1747">#c1747</a>)</em></sub></div>