Vue randomly adding v-move onto transition group elements
Vue version
3.3.4
Link to minimal reproduction
https://github.com/VividLemon/bootstrap-vue-next/tree/carousel-hack
Steps to reproduce
- Clone my repo
- switch to branch carousel-hack
- pnpm i
pnpm dev --filter bootstrap-vue-next
- open up the console
- view one of the picture elements
- 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
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.