Transition component does not trigger leave classes.

[michaelpumo]

I am using the new version 2 of your plugin.

In my App.vue, I have the following:

<template>
  <div id="app" class="Layout">
    <transition name="Layout__router" mode="out-in">
      <vue-extend-layouts />
    </transition>
  </div>
</template>

<script>
import VueExtendLayouts from 'vue-extend-layout'

export default {
  name: 'App',
  components: {
    VueExtendLayouts
  }
}
</script>

<style lang="scss">
.Layout {
  &__router {
    &-enter-active,
    &-leave-active {
      transition: all 1s;
    }
    &-enter-active {
      transition-delay: 1s;
    }
    &-enter,
    &-leave-to {
      opacity: 0;
      pointer-events: none;
    }
  }
}
</style>

This should happily fade out the route and then fade in on the new route.

However, the transition component is only fading in once the route has entered. No animation / classes are triggered for leaving the route so far as I can see.

Is this an issue with your plugin? It's difficult to determine.

Thanks Michael

[ktquez]

I'll run a test with transitions. Have you tried the transitions inside the layouts?

[michaelpumo]

Thanks @ktquez.

Yes, I just tried that too; moving the transition into each respective layout but when doing that, nothing happens at all.

[ktquez]

Usually it uses the "meta" of the route to modify the layout. That must be why.

[michaelpumo]

How do you mean it uses the meta? Is that related to vue-meta plugin?

If you have it working it’d be great to see an example up on the docs.

[ktquez]

Setting layout by meta object: https://github.com/ktquez/vue-extend-layout/blob/master/example/src/router.js#L20

Choosing which layout will be loaded: https://github.com/ktquez/vue-extend-layout/blob/master/vue-extend-layout.vue#L23

[michaelpumo]

Ahh yes I see now. I might submit a PR to handle this then, if you're welcoming them?

[ktquez]

@michaelpumo Yes, I would be grateful for a PR

[shirshak55]

yea anyway to handle this transition as it is not working properly. I used to keep transition wrapping router-view . But it seems this package re renders every time making transition not possible.

[ktquez]

@michaelpumo Could you reproduce an example online?

[ktquez]

@michaelpumo @shirshak55 With the corrections of @shirshak55 you could test whether the transitions now work.

[ktquez]

Anything new will open again.