Subscribe on changes!

TransitionGroup Flip will be affected by transform

avatar
Jun 13th 2022

Vue version

3

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgYnV0dG9ucyA9IHJlZihbXG4gIDEsIDIsIDNcbl0pXG5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvbnMudmFsdWUuc2hpZnQoKVxuICBidXR0b25zLnZhbHVlLnB1c2goYnV0dG9uKVxufSwgMTUwMClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXYgc3R5bGU9XCJ0cmFuc2Zvcm06IHNjYWxlKC41KVwiPlxuICAgICAgPHRyYW5zaXRpb24tZ3JvdXAgbmFtZT1cImZsaXBcIj5cbiAgICA8YnV0dG9uIHYtZm9yPVwiYnV0dG9uIGluIGJ1dHRvbnNcIiA6a2V5PVwiYnV0dG9uXCI+XG4gICAgICB7e2J1dHRvbn19XG4gICAgPC9idXR0b24+XG4gIDwvdHJhbnNpdGlvbi1ncm91cD5cbiAgPC9kaXY+XG4gICAgICAgIDx0cmFuc2l0aW9uLWdyb3VwIG5hbWU9XCJmbGlwXCI+XG4gICAgPGJ1dHRvbiB2LWZvcj1cImJ1dHRvbiBpbiBidXR0b25zXCIgOmtleT1cImJ1dHRvblwiPlxuICAgICAge3tidXR0b259fVxuICAgIDwvYnV0dG9uPlxuICA8L3RyYW5zaXRpb24tZ3JvdXA+XG48L3RlbXBsYXRlPlxuXG48c3R5bGU+XG5idXR0b24ge1xuICAgIHRyYW5zaXRpb246IGFsbCAycyBlYXNlO1xuICAgIHdpZHRoOiAxMDAlO1xufVxuLmZsaXAtbGVhdmUtdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMTAwJSk7XG59XG4uZmxpcC1lbnRlci1mcm9tIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7XG59XG5cbi5mbGlwLWxlYXZlLWFjdGl2ZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xufVxuPC9zdHlsZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInZ1ZS9zZXJ2ZXItcmVuZGVyZXJcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9

Steps to reproduce

set transform to the parent element of TransitionGroup (e.g transform: scale(.5))

What is expected?

smooth animation

What is actually happening?

the animation is also scaled

System Info

No response

Any additional comments?

it might because of Element.getBoundingClientRect(). it will be affected by transform, too