BaseStackedView.vue

<script>
export default {
  inheritAttrs: false,

  props: {
    index: {
      type: [String, Number],
      default: null,
    },

    transition: {
      type: String,
      default: 'stack',
    },

    duration: {
      type: [String, Number],
      default: null,
    },

    tag: {
      type: String,
      default: 'div',
    },
  },

  data () {
    return {
      direction: 'toLeft',
    }
  },

  watch: {
    index (value, oldValue) {
      if (value < oldValue) {
        this.direction = 'toRight'
      } else {
        this.direction = 'toLeft'
      }
    },
  },

  render (h) {
    const data = {
      class: [
        this.$style.stack,
        this.$style[this.direction],
      ],
      attrs: this.$attrs,
      props: {
        name: this.transition,
        tag: this.tag,
      },
      on: this.$listeners,
    }
    const children = this.$slots.default.filter(
      vnode => vnode.tag
    )
    children.forEach((vnode, index) => {
      vnode.key = index
    })
    return <transition-group {...data}>
      { children[this.index] }
    </transition-group>
  },
}
</script>

<style lang="stylus" module>
.stack
  width 100%
  height 100%
  position relative
  overflow hidden

  :global
    .stack-enter-active,
    .stack-leave-active
      transition transform .2s cubic-bezier(.17, .67, .32, .97)

    .stack-leave-active
      pointer-events none
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      overflow hidden

  &.toLeft :global(.stack-enter),
  &.toRight :global(.stack-leave-to)
    transform translate3d(100%, 0, 0)

  &.toRight :global(.stack-enter),
  &.toLeft :global(.stack-leave-to)
    transform translate3d(-100%, 0, 0)
</style>