Keep rotateZ on elements with a layout animation
The projection pipeline handled rotate, rotateX and rotateY but not rotateZ, so a layout or shared layout animation silently dropped it from the generated transform and never mixed it between lead and follow.
This commit is contained in:
1 parent
1ba1c99cc1
commit
2e01f31175
7 files changed
+83
No files matched your search
@@ -102,4 +102,35 @@ describe("buildProjectionTransform", () => {
|
||||
buildProjectionTransform(delta, { x: 1, y: 1 }, { rotate: 10 })
|
||||
).toEqual("translate3d(100px, 100px, 0px) rotate(10deg) scale(2, 4)")
|
||||
})
|
||||
|
||||
it("Applies rotateZ", () => {
|
||||
const delta = {
|
||||
x: {
|
||||
translate: 100,
|
||||
scale: 2,
|
||||
origin: 0.5,
|
||||
originPoint: 100,
|
||||
},
|
||||
y: {
|
||||
translate: 100,
|
||||
scale: 4,
|
||||
origin: 0.5,
|
||||
originPoint: 100,
|
||||
},
|
||||
}
|
||||
|
||||
expect(
|
||||
buildProjectionTransform(delta, { x: 1, y: 1 }, { rotateZ: 10 })
|
||||
).toEqual("translate3d(100px, 100px, 0px) rotateZ(10deg) scale(2, 4)")
|
||||
|
||||
expect(
|
||||
buildProjectionTransform(
|
||||
delta,
|
||||
{ x: 1, y: 1 },
|
||||
{ rotate: 45, rotateX: 20, rotateY: 30, rotateZ: 10 }
|
||||
)
|
||||
).toEqual(
|
||||
"translate3d(100px, 100px, 0px) rotate(45deg) rotateX(20deg) rotateY(30deg) rotateZ(10deg) scale(2, 4)"
|
||||
)
|
||||
})
|
||||
})
|
||||
@@ -36,6 +36,7 @@ export function buildProjectionTransform(
|
||||
pathRotation,
|
||||
rotateX,
|
||||
rotateY,
|
||||
rotateZ,
|
||||
skewX,
|
||||
skewY,
|
||||
} = latestTransform
|
||||
@@ -46,6 +47,7 @@ export function buildProjectionTransform(
|
||||
if (pathRotation) transform += `rotate(${pathRotation}deg) `
|
||||
if (rotateX) transform += `rotateX(${rotateX}deg) `
|
||||
if (rotateY) transform += `rotateY(${rotateY}deg) `
|
||||
if (rotateZ) transform += `rotateZ(${rotateZ}deg) `
|
||||
if (skewX) transform += `skewX(${skewX}deg) `
|
||||
if (skewY) transform += `skewY(${skewY}deg) `
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user