Version

3.2.10

Reproduction link

codepen from the Modal Component example

Steps to reproduce

When visiting Modal Component example this codepen example is embedded. There is a <transition> tag in the example, but the transitions don't actually work.

What is expected?

I expect to either not see <transition> in the example code or to see working transitions. I expect the modal and the mask to appear and disappear "slowly". Especially when I change the transition: CSS rules to e.g. 5s.

What is actually happening?

I see transition code that doesn't work

I've created a new pen as a fork of the Modal example by modifying it to look like the The guide's Enter & Leave Transitions example on codepen. In my new pen the transitions work.

The major change I had to do was to move the <transition> out of the modal template so it now surrounds the place where it is used. As I read the Enter & Leave Transitions documentation, the v-if needs to be inside the <transition> and when I do that, it works. I also changed some of the .modal-(enter|leave)* CSS rules to make the transitions work "better". Likely all my changes can be improved upon tremendously. But at least now the transitions work.

It would be great if the transitions in the modal example worked out-of-the-box.

@pmorch thank you for reporting this! Codepen in the docs is updated not 👍🏻