Static GitHub Issues

[1960] Checking to/from inside transition object?

prev: Cannot install nuxt.js when it is a dependency of a dependency
next: How to define a dynamic route like product-detail-{productName}.html with regexp (for SEO)?

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>