小动画｜带有渐变流光分割线的列表组件

我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

设计

最近我们把 SoupStudio官方网站 上线了。关于网站里用到的技术和设计有不少可说的，比如随滚动的作品封面变化和顶部好玩的物理碰撞Doodle等等，今天的主题是用于展示文字内容的列表组件，它的特点是：当滚动到可视区域时可以逐次显现，并且其分割线带有从左往右的彩色流光效果。

对于一个黑白灰为主色调的网站，保持干净的设计往往有时候显得有些无聊。我们希望它拥有一点“光泽感”，在适当的时候提升氛围，于是决定在内容出现的时候加入两个效果：

1. 逐次显现、上移到原位
2. 彩色流光分割线

体验

SoupStudio官方网站 滚动到下半部分

实现

该项目采用Vue框架

vue template

<template>
    <!-- 列表组件的外层容器 -->
    <div :class="[
        $style.list,
        state?[$style.hide]:'' // 用一个状态控制其进入画面时去掉名为hide的样式class
     ]">
        <!-- 列表单行容器 -->
        <div 
            :class="[$style.listItem]" 
            v-for="(item,index) in ..."
            :style="`transition-delay:${(index)/5}s`" // 核心代码,通过添加间隔的动画 delay 使其逐次执行展现动画
        >
         {{ ... }}
        </div>
    </div>
</template>
复制代码

css

<style module>

.listItem {
  position: relative;
  padding: 24px 0;
  display: flex;
  font-size: 15px;
  text-decoration:none;
  transition-duration: 1s;
  opacity: 1;

}

.listItem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0,0,0,.1);
  transition-duration: 2s;
  transition-timing-function: linear;
  background-size: 500px 1px;
  background-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(255,0,50,1) 60%,rgba(255,0,250,1) 100%);
  background-position: 500px 0;
  background-repeat: no-repeat;
  transition-delay: inherit;
}

.hide>.listItem{
  transform: translateY(100px);
  opacity:0;
  transition-delay: 0s !important;
}

.hide>.listItem::after {
  background-position: -500px 0;
  transition-duration: 0s !important;
}
</style>
复制代码

这里有几个关键：

1. 通过 hide 样式制定列表元素的初始状态为向下偏移100px和透明

transform: translateY(100px); 
opacity:0;
复制代码

2. 在 listItem 上设置 transition-delay 依次为 0.1s 0.2s 0.3s 0.4s ... 3. 用伪元素 listItem::after 制作分割线，方法是用它来做一个绝对定位的，高度只有1px的长方形，紧贴 listItem 的下方。

这样做好处是可以比较灵活地控制颜色和动画，如果用border做分割线，也可以用border-image做渐变效果，但无法令其动画

3. 流光效果来自分割线的渐变背景移动

首先绘制一个渐变色背景

background-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(255,0,50,1) 60%,rgba(255,0,250,1) 100%);
复制代码

注意渐变色的左端是完全透明的，作为background-image可以通过background-position控制位置，于是我们用

  background-position: -500px 0;
复制代码

把整个渐变色放置在线条的左边外，而产生动画时改变其位置

 background-position: 500px 0;
复制代码

使其移动到右边并且移出背景范围。因此我们就能看到一条彩色从左往右而去，也就实现了流光效果了。

最后谢谢大家耐心观看，以后我们还会在官网上玩更多的效果，欢迎来玩。