Currently, flipjs supports implementing the FLIP technique for a single element that changes position due to a class change. However, a common use-case (similar to Android's Shared Element Activity Transitions) is that:
The final node is nearly equivalent to the initial node, save for differences in position/size.
The final node is not the same node as the initial node.
One strategy I've been using is [data-flip="foo"] on both the initial and final nodes, so that I can:
getBoundingClientRect() on the initial (currently visible) node
execute the code that removes the initial node and displays the final node
getBoundingClientRect() on the final (now visible) node
execute FLIP.
Perhaps we can supply an argument to last(...) that allows us to specify the new shared node?
Currently,
flipjs
supports implementing the FLIP technique for a single element that changes position due to a class change. However, a common use-case (similar to Android's Shared Element Activity Transitions) is that:One strategy I've been using is
[data-flip="foo"]
on both the initial and final nodes, so that I can:getBoundingClientRect()
on the initial (currently visible) nodegetBoundingClientRect()
on the final (now visible) nodePerhaps we can supply an argument to
last(...)
that allows us to specify the new shared node?