Child elements behave strangely in Flip animation.

[singlexyz]

 

After toggle .expand, both the parent and child elements have different states.

I added a Flip animation to both of them at the same time, and added spin: 1 to the child element.

 

The animation on the child elements is weird.

 

The code animation below is working as expected, but there is no spin animation for the .icon element.

const state = Flip.getState('.card, .icon')
card.classList.toggle('expand')
Flip.from(state)

See the Pen zYQGwaN by nayuxuohz (@nayuxuohz) on CodePen

[singlexyz]

I figure out, it's the CSS problem. 🥰