Transition doesn't seem to work when using a transition.

[MichMich]

When using a vue transition to fade to new content, the vue-smooth-reflow effect doesn't seem to work. Do demonstrate the issue, I made a codesandbox example with two example containers, one contains the transition, the other doesn't:

https://codesandbox.io/s/wpmqzk19l

Is there a way around this issue?

[guanzo]

Yep, you should use the transitionEvent option. It's in the documentation.

Here's the updated example: https://codesandbox.io/s/k3x4j260qr

Waiting for child transitions to finish is an opt-in feature, meaning it's not done automatically. In the past, it used to be automatic by listening and reacting to any transitionend event that fired. In my experience this was a performance killer especially in large component hierarchies, which forced me to rethink how to do it properly.

The basic idea of transitionEvent is that you register a CSS selector, and/or a CSS property to be matched with a transition event. If it matches, then the smooth reflow will occur. You can see in the example that i set selector: p. This is because the elements that are transitioning out are p elements. I could have also done this

this.$smoothReflow({
      el: this.$refs.test1,
      transitionEvent: {
          propertyName: 'opacity'
      }
})

It would have the same effect, because the elements are transitioning out with opacity.

This also works

this.$smoothReflow({
      el: this.$refs.test1,
      transitionEvent: {
          selector: 'p',
          propertyName: 'opacity'
      }
})

or this!

this.$smoothReflow({
      el: this.$refs.test1,
      transitionEvent: {
          selector: 'p, .asoeunaouignaowegawg,.gibberish,.q3goq3n4goq3igq35g'
      }
})

CSS selectors are quite flexible.

Closing this issue now, hope that was helpful.

[MichMich]

Thanks for the extensive explanation.

Unfortunately that doesn't seem to solve the issue. I noticed transitionEvent in the documentation and played with it (just like you showed). It didn't gave the desired results. The updated example you mentioned doesn't seem to work either.

Just to be clear: the gray box behind the left content does not reflow smootly, it just jumps from small to large and back (the usual behaviour when vue-smooth-reflow isn't implemented). Are you getting different results?

FYI: I tried both Chrome and Safari.

[guanzo]

Hmm... It should definitely work on Chrome. The example I posted works for me. I'm aware that it won't work perfectly on other browsers. My chrome version is: Version 68.0.3440.106 (Official Build) (64-bit). What's yours?

Reopening for now until I can figure it out.

[MichMich]

Version 68.0.3440.106 (Official Build) (64-bit) on macOS 10.13.6 (17G65).

[MichMich]

Ok, scratch that. I refreshed in Chrome, and now it seems to work.

It doesn't seem to work in Safari Version 11.1.2 (13605.3.8) though (as you hinted).

[guanzo]

Ok great. So yeah the problem with other browsers is that when an element is transitioned out with <transition> and the v-if directive, a transitionend event isn't fired. The transitionEvent option depends on the transitionend event, so this presents a bit of a problem.

I don't know if this is Chrome going beyond the spec, or that other browsers are doing it wrong.

What's curious is that I'm sure if you defined the leave or after-leave js hook on the <transition> element, the callbacks will fire on other browsers. I assume vue must be receiving the transitionend event somehow. I'll have to read the vue source code to learn more.

I'll leave this issue open until we can get transitionEvent working on all major browsers.

[MichMich]

FYI: As an experiment, I added the after-leave hook to log to the console, and it seems to work in Safari.

[KristiyanTs]

I think I found a workaround.

      <component
        :is="loading ? '' : 'transition-group'"
        tag="tbody"
        name="table-row"
      >
        <Task
          v-for="task in tasks"
          :task="task"
          :key="task.id"
        />
      </component>

In my example, I use a table but I guess you could use whatever. Then, in the script, after the elements are loaded, set "loading" to false ;)

[WofWca]

For me, it looks good in the sandbox you provided (https://codesandbox.io/s/k3x4j260qr), but if I download it and host locally, it does not. The animation is jerky:

1. The old element fades out, the new element gets inserted, starts fading in, height immediately jumps to its final value.
2. The new element finishes fading in, height immediately jumps to its initial value.
3. Height transitions from initial to final.

In my app, however, the behavior is inconsistent – sometimes it behaves as above, sometimes the height just jumps and that's it (like when vue-smooth-reflow is not there at all).

Win 10, Chrome 79.0.3945.88 official build x64
and
Win 10, Firefox Developer Edition 72.0b11 (64-bit)