How to use CSS3 to implement a queue animation similar to online live broadcast

A friend in the group asked a question before, that is, how to implement a queue animation similar to the live broadcast platform when users go online in the mini program ? As a front-end engineer, there are only two solutions:

• Use javascript to control the style of elements according to conditions to achieve queue animation
• Use pure CSS3 with data-driven model to achieve this.

As we all know, in modern Web development, we should try not to use Js for effects that can be achieved with CSS , so we should give priority to using CSS3 . However, we need to combine data flow to achieve true queue animation, so we can use the convenient data-driven model of the MVVM framework to control the direction of the animation.

Since the core of the animation is CSS3 , the principles of implementation in mini programs or Vue/React are similar, so you don’t have to worry about the technology stack. The following is the effect diagram after implementation:

In fact, this effect is used in many places, such as the bullet screen of Bilibili , the fan online animation of a certain music platform live broadcast, the live broadcast of a certain music, etc., but on the Web side , how can we achieve it? Next, the author will take you step by step to achieve such an animation effect.

text

To achieve the above animation effect, we need to analyze the animation first. The animation structure of the above figure is as follows:

The animation is divided into the following two processes:

• User entry animation
• User fade out animation

Another detail is that no matter how many users enter, they all enter from the same position, and the previous user's position will move up, as shown in the following figure:

So the best way to achieve this effect is to use positioning, such as absolute positioning ( absolute ) or fixed positioning (fixed). And set its bottom

Value, as shown in the following code:

.animateWrap {
    position: absolute;
    bottom: 40%;
    left: 12px;
}

The above position information is for reference only. The specific value can be changed according to your own needs. The advantage of setting bottom is that once the child element of the container is added, the previous element will be automatically pushed up, so we don't need to manually set its offset value.

Implementing entry animation

If we want to realize the user entry animation in the above picture, we can use the transition animation of CSS3 or animation animation. Due to the convenience of the usage scenario, we use animation 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 is online</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Teacher Li is online</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Teacher Li is online</span></div>
  </div>

The above code indicates that an animation container is created and two users are added. 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.2s;
    }
@keyframes moveIn {
  0% {
    transform: translateX(calc(-100% - 12px));
  }
  100% {
    transform: translateX(0);
  }
}

The above animation realizes the element moving to the right, but the animation we see at this time appears at the same time. If we want to apply it to the real scene, it must be asynchronous data obtained through socket or round-robin , so we can use setInterval to simulate this process. Another detail is that our animation only fully displays 2 user data at most, and the excess data will fade out and hide, 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)
  }, [])

The variable MAX_USER_COUNT is used to control the maximum number of users displayed. It can be changed according to actual needs. The logic in setUser is the interception logic. When the number of users exceeds the specified maximum value, the header element will be deleted.

The above completes the data flow process. What we still need to deal with is the user's fade-out logic and animation. Let's first look at the fade-out animation :

@keyframes moveOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

In fact, animation is not difficult. What we need to control is how to dynamically add this animation to the header element. At this time, our best solution is to use the class name. That is, when the fade-out conditions are met, we need to dynamically set the fade-out class name for the fade-out element. The conditions are as follows:

user.length > MAX_USER_COUNT && i === 0 The above condition means that when the number of users exceeds the maximum number of displayed users and the element is a header element, then 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>Mr. Li {item} is online</span></div>
  })
}

The css code is as follows:

.hidden {
  opacity: 0;
  animation: moveOut 1.2s;
}

Through the above steps, we have realized a complete online live streaming queue animation. The complete CSS code of the animation is as follows. Interested friends can learn and refer to it:

.animateWrap {
    position: absolute;
    bottom: 40%;
    left: 12px;
    .animate {
      margin-bottom: 10px;
      border-radius: 20px;
      background-color: rgba(0,0,0, .3);
      animation: moveIn 1.2s;
      .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.2s;
    }
    @keyframes moveIn {
      0% {
        transform: translateX(calc(-100% - 12px));
      }
      100% {
        transform: translateX(0);
      }
    }
    @keyframes moveOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }

at last

This concludes this article on how to use CSS3 to implement a queue animation sample code for online live streaming. For more relevant CSS3 online live streaming queue animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!