ktquez/vue-extend-layout

Transition component does not trigger leave classes.

Closed this issue · 11 comments

michaelpumo commented

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 commented

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

michaelpumo commented

Thanks @ktquez.

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

ktquez commented

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

michaelpumo commented

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.

michaelpumo commented

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

ktquez commented

@michaelpumo
Yes, I would be grateful for a PR

shirshak55 commented

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 commented

@michaelpumo
Could you reproduce an example online?

ktquez commented

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

ktquez commented

Anything new will open again.