Before, a friend in the group asked such a question, that is, how to achieve in the small program similar to the live platform when the user online queue animation? As a front-end engineer, there are two solutions:
- Implement queue animations using javascript to control the style of elements based on conditions
- Using pure CSS3 and data driven model to achieve.
We all know that in modern Web development, we can use Css to achieve the effect as far as possible do not use Js, so we should give priority to using Css3 to achieve, but we need to combine data flow to achieve real queue animation, so we can use MVVM framework convenient data driven model to control the direction of animation.
And because the core of animation isCss3And so onSmall programOr is itVue/ReactIn fact, the implementation principle is similar, you do not have to worry about the technology stack. The following is the effect of the implementation:
In fact, this effect is used in many places, such as the bullet screen of STATION B, the online animation of fans live on a music platform, and the live broadcast of a certain sound, etc. In the Web end, how can we achieve it? Next I will take you step by step to achieve such animation effect.
The body of the
To achieve the above animation effect, we need to analyze the animation first. The animation structure of the above image is as follows:
- The user enters the animation
- The user fades out the animation
Another detail is that no matter how many users are entered, they are entered from the same position, and the position of the previous user moves up, as shown in the figure below:
.animateWrap {
position: absolute;
bottom: 40%;
left: 12px;
}
Copy the codeThe above location information is for reference only, the specific value can be changed according to their own needs. The nice thing about setting bottom is that as soon as a child element is added to the container, it will automatically top up the previous element, so you don’t need to manually set its offset.
Implement enter animation
In order to animate the user as shown above, we can use Css3 transition or animation. Because of the convenience of using the scene, we use animation here. First let’s write the DOM structure:
<div className={styles.animateWrap}>
<div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Teacher Li online</span></div>
<div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Teacher Li online</span></div>
<div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Teacher Li online</span></div>
</div>
Copy the codeThe above code creates an animation container and adds two users. Here we define the key animations as follows:
.animate {
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(0.0.0.3);
animation: moveIn 1.2 s;
}
@keyframes moveIn {
0% {
transform: translateX(calc(-100% - 12px));
}
100% {
transform: translateX(0); }}Copy the codeThis is the animation that moves elements to the right, but the animation we see at this time is simultaneous, and we want to apply it to the real scene, it must be asynchronous data obtained through socket or round rotation, so we can use setInterval to simulate this process. Another detail is that in our animation, only two pieces of user data can be fully displayed, and the excess data will gradually be hidden, so we need to intercept the data, the code is as follows:
const [user, setUser] = useState<Array<string>>([])
useEffect(() = > {
let MAX_USER_COUNT = 2;
let timer = setInterval(() = > {
setUser(prev= > {
prev.push(Date.now() + ' ')
if(prev.length > MAX_USER_COUNT + 1){
prev.shift()
return [...prev]
}else {
return [...prev]
}
})
}, 2000)}, [])Copy the codeThe variable MAX_USER_COUNT is used to control the maximum number of users displayed. It can be changed according to actual requirements. The logic in setUser is the flow blocking logic, and the header element will be deleted when the number of users exceeds the specified maximum value.
That completes the data flow process, we also need to deal with the user emergence logic and animation. Let’s first look at the animation:
@keyframes moveOut {
0% {
opacity: 1;
}
100% {
opacity: 0; }}Copy the codeIn fact, animation is not difficult. What we need to control is how to dynamically add the animation to the head element. At this time, our best solution is to use the class name, that is, when the fading condition is met, we need to dynamically set the fading class name for the fading element.
- user.length > MAX_USER_COUNT && i === 0
When the number of users exceeds the maximum number of display users and the element is a header element, we only need to dynamically set the class name according to this condition:
{
user.map((item, i) = > {
return <div className={classnames(styles.animate, user.length > 2 && i === 0 ? styles.hidden : '')} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Miss Li {item} online</span></div>})}Copy the codeThe CSS code is as follows:
.hidden {
opacity: 0;
animation: moveOut 1.2 s;
}
Copy the codeThrough the above steps we will achieve a complete class online live queue animation, animation complete CSS code as follows, interested friends can learn reference:
.animateWrap {
position: absolute;
bottom: 40%;
left: 12px;
.animate {
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(0.0.0.3);
animation: moveIn 1.2 s;
.tx {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
vertical-align: middle;
margin-right: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover; }}span {
margin-right: 12px;
line-height: 36px;
font-size: 14px;
color: #fff; }}.hidden {
opacity: 0;
animation: moveOut 1.2 s;
}
@keyframes moveIn {
0% {
transform: translateX(calc(-100% - 12px));
}
100% {
transform: translateX(0); }}@keyframes moveOut {
0% {
opacity: 1;
}
100% {
opacity: 0; }}}Copy the codeThe last
If you want to learn more front-end skills, practices and learning routes, welcome to join our technology group in “Interesting Talk front-end” to study and discuss together, explore the frontier of the front-end.
More recommended
- Build an interesting crawler platform based on Apify+ Node + React /vue
- Summary of several common sorting algorithms and search algorithms necessary for programmers
- Implementing a CMS full stack project from 0 to 1 based on nodeJS (part 1)
- Implementing a CMS full stack project from 0 to 1 based on nodeJS
- Vue and React
- From zero to one teaches you to develop a component library based on VUE
- Build front-end team component systems from 0 to 1
- 8 frequently used custom hooks by hand in 10 minutes