之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画?...正文
要想实现上面的动画效果, 我们需要先分析一下动画, 上图的动画结构如下:
动画一共分为以下两个过程:
用户进入动画
用户淡出动画
还有一个细节就是不管进入多少个用户, 都是从同一个位置进入的, 此时上一个用户位置会上移...实现进入动画
我们要想实现上图的用户进入动画, 可以使用Css3的过渡动画transition,也可以使用animation动画, 由于使用场景的便捷性这里我们采用animation动画, 首先我们先写一下...}
100% {
opacity: 0;
}
}
其实动画并不难, 我们需要控制的是如何给头部元素动态的添加这个动画, 此时我们最好的方案是通过类名, 即当满足渐出的条件时..., 我们需要给渐出的元素动态设置渐出类名, 条件如下:
user.length > MAX_USER_COUNT && i === 0
以上条件指的是当用户数超过最大展示用户数并且当且元素为头部元素时,