水一篇代码相关的 blog.
最近在做微信小程序, 设计稿上有一个省略号依次颜色变化组成的 loading 组件. 据说来自微信 UI 设计标准, 可是哪里都找不到, 只能自制了. 顺便吐槽一下小程序的设计和文档, 真是 tmd...
效果主要就是省略号中各个点周期性交替闪烁. 闪烁可以有多种表现形式, 如颜色或者透明度变化, 这方面倒不是什么大问题. 如何支持任意个数的"点"是需要思考的地方. 经过一些实验, 打算采取通过子元素作为 stub 控制个数, :nth-child()伪元素和animation-delay来控制交替. animation-delay可以设为负值来避免初始状态的问题, 也算是覆盖到了知识盲点.
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.2;
}
}
.ellipsis-loading i {
display: inline-block;
width: 1em;
height: 1em;
background: gray;
border-radius: 861112px;
animation: blink 1s ease-in-out -1s infinite alternate;
}
.ellipsis-loading i:nth-child(3n + 1) {
animation-delay: -0.5s;
}
.ellipsis-loading i:nth-child(3n + 2) {
animation-delay: -0.1s;
}
.ellipsis-loading i:nth-child(3n + 3) {
animation-delay: -1.5s;
}<div class="ellipsis-loading">
<i />
<i />
<i />
</div>