Transition

[madmoizo]

Hi,

vue: 2.5.13
portal-vue: 1.3.0-beta.0

I have a basic usage of portal-vue for modal display (because sadly (or not) z-index is relative)

<portal-target name="modal" transition="modal-transition"></portal-target>

<portal to="modal">
    <router-view></router-view>
</portal>

I got the following breaking error (there is only one modal at a time)
[Vue warn]: <transition-group> children must be keyed: <>
I fixed it with slim props but is it a normal behavior ?

Other thing, transition works fine on the initial state if used like this:

<portal to="modal">
    <router-view>
           /* 
             <transition name="modal-transition">
                    <div class="modal"></div>
            </transition>
          */
    </router-view>
</portal>

But the leave part of the animation is ignored.
Is it possible to get the animation duration then clean the portal-target after it ends ?
Because ideally, I see portal-vue as an option. If I have to move the transition part of a component to get it works, its behavior with or without portal will be different and it's a problem.

Thanks for your work on this lib!

[LinusBorg]

is it a normal behavior?

Yes it is. Without the slim prop, a transition-group is used, and as the error states, it's children need a key.

For the second problem I would need to see some actual code that I can run.

[madmoizo]

Thanks for the quick answer. I'll update with a demo asap

[madmoizo]

Harder than expected to reproduce in a codepen, I'll create a dedicated repo

[madmoizo]

Repo: https://github.com/frlinw/vue-portal-transition-leave-issue
Demo : https://powerful-plains-56797.herokuapp.com

Edit: tinymachine repro is cleaner

[LinusBorg]

thanks, will take a look in the coming days. I'm a bit short on time at the moment, unfortunately.

[tinymachine]

+1 on the leave part of the transition being ignored (vue: 2.5.17, portal-vue: 1.3.0).

Repo: https://github.com/tinymachine/portal-vue-transition-examples
Demo: https://vue-portal-transition-leave-issue.netlify.com

Thanks for open-sourcing this project!

[kfirba]

The enter transition works just as expected but the leave transition never triggers. Any news on that issue?

[redplant3d]

Hi @kfirba , it's because of the this.$el.innerHTML = '' in the portal-target.js.
beforeDestroy() { this.unwatch() this.$el.innerHTML = '' },
@LinusBorg: Does the removal of the innHtml-line have any sideeffects?

[LinusBorg]

Good catch. I remember I put it there for some reason, but forgot what it was, to be perfectly honest.

Maybe it might not be necessary (any longer)

[kfirba]

@redplant3d Good catch.

@LinusBorg Any plans to address this? Do you need us to check something?

[LinusBorg]

Yes I'm planning to address this, but I'm still struggling to make time for this project sind February. Was moving, had a huge project at work and so on.

My schedule will relax considerably around the end of June, but before that' i won't be able to much.

If you want to submit a PR with this line removed and passing tests, that would be appreciated.

[thomasaull]

+1 for this, I just ran into the same issue :)

Oh and quick update: It works for me if I add the slim option to the portal-target

[tinymachine]

@LinusBorg: Hope it's not poor form to tag you on this; just want to make sure you were aware of this issue since 1.4.0-beta.1 is supposed to fix this transition issue, but, in my testing at least, it seems not to.

I might be missing something, but I updated to the 1.4.0-beta.1 version and I'm still seeing the issue of the leave transitions not displaying:

1.4.0-beta.1 example
1.3.0 example
(links to repos appear in the examples)

Any help you can offer would be great -- thank you!