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

这篇文章给大家分享的是有关怎么使用css3实现一个类在线直播的队列动画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新新互联，凭借10多年的成都网站设计、网站制作经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上千案例。做网站建设，选成都创新互联。

之前在群里有个朋友问了这样一个问题, 就是如何在 小程序中实现类似 直播平台的用户上线时的 队列动画? 作为一名前端工程师, 解决方案无非以下2种:

使用 javascript根据条件来控制元素的样式实现队列动画
用纯 css3配合数据驱动模型来实现.

大家都知道在现代的 Web开发中, 我们能使用 Css实现的效果尽量不要用 Js, 所以我们应该优先考虑用 Css3来实现,但是我们要结合 数据流才能实现真正的队列动画, 所以我们可以利用 MVVM框架便捷的数据驱动模型来控制动画的走向.

又由于动画的核心在于 Css3, 所以在 小程序或者是 Vue/React中实现其实原理都是相似的, 大家不必担心技术栈的问题. 以下是实现后的效果图:

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

其实这种效果在很多地方都用到, 比如 B站的弹幕, 某音乐平台直播的粉丝上线动画, 某音的直播等等, 而在 Web端, 我们又能怎么实现它呢? 接下来笔者将带大家一步步实现这样的动画效果.

正文

要想实现上面的动画效果, 我们需要先分析一下动画, 上图的动画结构如下:

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

动画一共分为以下两个过程:

用户进入动画
用户淡出动画

还有一个细节就是不管进入多少个用户, 都是从同一个位置进入的, 此时上一个用户位置会上移,如下图所示:

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

所以要想实现这样的效果最好的方式就是使用定位,比如绝对定位( absolute)或者固定定位( fixed). 并设置其 bottom

值, 如下代码所示:

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

以上位置信息仅供参考,具体数值可根据自身需求来更改.设置 bottom的好处是容器的子元素一旦增加, 会自动将上一个元素顶上去, 所以不需要我们手动去设置其偏移值.

实现进入动画

我们要想实现上图的用户进入动画, 可以使用 Css3的过渡动画 transition,也可以使用 animation动画, 由于使用场景的便捷性这里我们采用 animation动画, 首先我们先写一下dom结构:

李老师上线

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

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) }, [])

.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实现一个类在线直播的队列动画

其他资讯