Video Tutorial Animate Your Components with Flip Toolkit View
In this video I propose to discover how to set up animations based on the FLIP technique with VueJS and the view-flip-toolkit library (based on react-flip-toolkit).
To follow this tutorial you can download the basic code used in the video.
Operation
View-flip-toolkit relies on the use of 2 components
- Pinball serves as a container and allows you to configure the behavior of the animation. This component uses a property
FlipKeywhich will have to be modified when a change of structure is made. - Flipped memorizes the position of the elements to be animated. Each element must have an attribute
flipIdunique to identify it.
Here is a small example with a randomly reordered list.
- {{Num}}
