怎么使用css3实现一个类在线直播的队列动画

以上代码表示创建了一个动画容器, 并且添加了2个用户, 这里我们定义一下关键动画如下:

.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);
  }
}

以上即实现了元素向右移入的动画, 但是此时我们看到的动画是同时出现的, 我们要应用到真实场景中, 一定是通过 socket或者通过 轮循拿到的异步数据, 因此我们可以使用 setInterval来模拟这一过程. 还有一个细节是我们动画里最多只完整展示2条用户数据, 多余的数据会渐出隐藏, 因此我们需要对数据进行截流, 代码如下:

 const [user, setUser] = useState>([])
  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)
  }, [])

变量 MAX_USER_COUNT用来控制最大展示的用户数,可以根据实际需求更改, setUser里面的逻辑即为截流逻辑, 当用户数超过指定的最大值时, 会将头部元素删除.

以上即完成了数据流转的过程, 我们还需要处理的是用户渐出逻辑和动画.我们先看看渐出的 animation:

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

其实动画并不难, 我们需要控制的是如何给头部元素动态的添加这个动画, 此时我们最好的方案是通过类名, 即当满足渐出的条件时, 我们需要给渐出的元素动态设置渐出类名, 条件如下:

user.length > MAX_USER_COUNT && i === 0以上条件指的是当用户数超过最大展示用户数并且当且元素为头部元素时, 那么我们只需要根据这个条件来动态设置类名即可:

{
  user.map((item, i) => {
     return   2 && i === 0 ? styles.hidden : '')} key={item}>李老师{item}上线
  })
}

css代码如下:

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

通过以上步骤我们就实现了一个完整的类在线直播的队列动画, 动画完整 css代码如下, 感兴趣的盆友可以学习参考一下:

.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;
      }
    }
  }

感谢各位的阅读！关于“怎么使用css3实现一个类在线直播的队列动画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！