Subscribe on changes!

Vue randomly adding v-move onto transition group elements

avatar
Aug 2nd 2023

Vue version

3.3.4

Link to minimal reproduction

https://github.com/VividLemon/bootstrap-vue-next/tree/carousel-hack

Steps to reproduce

  1. Clone my repo
  2. switch to branch carousel-hack
  3. pnpm i
  4. pnpm dev --filter bootstrap-vue-next
  5. open up the console
  6. view one of the picture elements
  7. start clicking the controls

When you click back and forth on the controls, when v-move is applied to an element it "stutters", I'm not sure why this is. I'm never applying v-move to any element, so I'm not sure where it's coming from.

I apologize it's not a minimal reproduction. But the actual internals are not very important.

What is expected?

v-move should not be applied. I don't know why it's ever added, I don't see it ever mentioned on https://vuejs.org/guide/built-ins/transition.html#transition

What is actually happening?

v-move is applied at the end of transitions. It seemingly is the cause of some stuttering in transitions

System Info

System:
    OS: Linux 6.2 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 21.58 GB / 30.49 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.3.1 - /run/user/1000/fnm_multishells/9176_1690985460458/bin/node
    npm: 9.6.7 - /run/user/1000/fnm_multishells/9176_1690985460458/bin/npm
    pnpm: 8.6.5 - ~/.local/share/pnpm/pnpm

Any additional comments?

No response

avatar
Aug 2nd 2023

It's not mentoned in the Transition docs because it's part of TranstitionGroup (which you are using), particularly to provide an class to attach move styles to. like other transition classes, the default name starts with v- , unless you give your transition a specfic name.

https://vuejs.org/guide/built-ins/transition-group.html#move-transitions

And as you can see in the docs examples, this doesn't cause stuttering. So we would need to assume this is not a bug with our implementation unless you can provide a specific minimal reproduction demonstrating how it is.