Why
❝
Rendering a Table list is a very, very common requirement and what happens if we do nothing but add or remove one item from the Table? Elements added or removed will appear and disappear in “flash” and worse, their “brothers” will also teleport. That’s too much for a slightly obsessive front-end siege lion to bear, isn’t it
❞
❝
Fine, I add/remove CSS class names to each list item at the appropriate time and then I put some transition or animation properties on those classes and that’s it? Wait wait wait! What about “brothers”? “Brothers” are still teleporting…. Do you calculate where the “brothers” should be in the next frame and then use the transform to move it and transition the transform property? Ugh, ugh, woc is a hassle 🤯🤯🤯
❞
❝
Even if you do the hard work to achieve this effect, you will find a worse thing: “This is too slow 8😡😡😡”
❞
❝
You may have already tried to animate an element by changing its height, width, top, left, or other properties besides transform and opacity. You may have noticed from past experiences that your implementation’s motion effects are a little rough or even sluggish, but there’s a good reason for that 🧐 “Any property that triggers a layout change (like height), the browser recursively checks to see if other elements in the layout have changed as a result. Such a process is expensive. “If this calculation takes longer than an animation frame (about 16.7ms), the animation will lose frames, resulting in animation lag giving the user the experience that your animation is stuck, mainly because the lost frames of the animation were not rendered in time.
❞
❝
To achieve this we need to use a cool animation idea: FLIP “but I don’t know what the hell a FLIP is, how to do?
❞
❝
The powerful Vue nicely provides us with two built-in components: Transition & transition-group 🤩🤩 transition is probably a lot of use for you but it’s not the story of the day. Forget about it. The transition-group implements a simple animated queue of FLIP inside and in fact, There is also an introduction to it and a demo at 🤞. Today we are going to use transition-group to encapsulate a general purpose component. The purpose is to throw a list into it to help us achieve the cool FLIP animation effect 🥂
❞
How
❝
“Talk is cheap, show you the code“
❞
FLIPWrapper.vue
<template>
<transition-group name="FLIP-wrapper" id="FLIP-wrapper">
<slot>
<h1 :key="1" class="FLIP-wrapper-tip"> 🦄 EMPTY 😱 😱 😱 😱 😱 😱 😱 < / h1 >
</slot>
</transition-group>
</template>
<script>
export default {
name: "FLIPWrapper"
};
</script>
<! -- Note that the style cannot be scoped, otherwise the transition effect will be invalid.
<style>
.FLIP-wrapper-enter-active,
.FLIP-wrapper-leave-active {
0.5 s help ease the transition: all;
}
.FLIP-wrapper-leave-active {
position: absolute;
}
/* The related styles before and after the element enters and leaves */
.FLIP-wrapper-enter, .FLIP-wrapper-leave-to
/* .component-fade-leave-active forBelow version 2.1.8 * /
{
opacity: 0;
The transform: translateY (100%) scale (0.1);
}
/* Use move class to trigger FLIP and make sibling elements transition */
.FLIP-wrapper-move {
transition: transform 1s, opacity 2s;
}
</style>
<style scoped>
#FLIP-wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
}
/ *
Here are some styles of the slot default content
This part is not important
* /
.FLIP-wrapper-tip {
margin-left: 8px;
color: #a3a3a3;
font-weight: bold;
border-radius: 8px;
Padding: 1 em em 1.5;
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(
-45deg,
#a3a3a3 0,
#a3a3a3 25%,
transparent 0,
transparent 50%
)
0 / 0.6em 0.6em;
animation: ants 12s linear infinite;
width: 100%;
}
@keyframes ants {
to {
background-position: 100% 100%;
}
}
</style>
Copy the codeuse
<FLIPWrapper>
<div v-for="(people, index) in peopleList" :key="people.id">
// do everything you want...
</div>
</FLIPWrapper>
Copy the codeThe effect
❝
“coolcoolcoolcoolcool…“
❞
What
❝
FLIP is a “high-performance way to dynamically change the position and size of DOM elements, regardless of how the layout is computed or rendered (e.g., height, width, float, absolute positioning, Flexbox, Grid, etc.). In the process of change will be given a certain dynamic effect, so as to achieve the purpose we need to make the UI dynamic effect more reasonable, corresponding to enhance the user experience.” So what does FLIP mean?
❞
❝
FLIP is a memory device and technology First proposed by @Paul Lewis. FLIP is an acronym for First, Last, Invert and Play.
❞
First
❝
First refers to the style state information that records the current element’s position, size, transparency, and so on before anything happens (before transition)
❞
Last
❝
Last refers to executing a piece of code that changes the element and records style state information about the element’s position, size, transparency, and so on in its Last state
❞
Invert
❝
Invert means calculating the position between the first and last positions of an element (or, if necessary, the size between the two states) and then using the numbers to perform some calculations to move the element (transform the position and size of the element). To create the illusion that it is in the first position (the initial position)
❞
Play
❝
Play means inverting the element (pretending to be in the first position). We can set the transform to None and move it to the last position to animate the element
❞
Write in the last
❝
As @Nick Babich said, “Animation brings the user interface to life.” Thanks to FLIP, front end workers have been able to create an even better user experience at a fraction of the cost 👏👏👏
❞
❝
In addition, if you are interested in the implementation of the FLIP, you can read a column on the blog: FLIP and a good article on the implementation of the Nuggets community: Front-end animation must know, must know: React and Vue both use the FLIP idea to achieve smooth movement.
❞
❝
“Thank you for reading 🤞🤞🤞” “I heard that people who like ⭐ don’t have too bad luck”
❞
