Birchline / 原型 / 微交互

任务完成

一次点击应该像一次小小的胜利。圆圈填充、对勾绘出、标签划线、一小撮彩屑迸出，然后整行悄悄退到一边。点击任务行播放；再点一次重置。

发送本周摘要周五

点击切换状态

关键帧

填充0ms

对勾80ms

划线120ms

彩屑200ms

收起600ms

可直接复制的 CSS

/* 圆圈：先闪赭石色，再带弹簧回弹收到橄榄绿 */
.task.done .check {
  animation: settle 380ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes settle {
  0%   { transform: scale(.8);  background: #D97757; }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1);   background: #788C5D; }
}

/* 对勾用 stroke-dashoffset 绘出，延迟 80ms */
.check path        { stroke-dasharray: 20; stroke-dashoffset: 20;
                     transition: stroke-dashoffset 220ms var(--ease) 80ms; }
.task.done path    { stroke-dashoffset: 0; }

/* 删除线从左向右展开 */
.label::after      { width: 0; transition: width 240ms var(--ease) 120ms; }
.task.done .label::after { width: 100%; }

/* 庆祝结束后整行收起 */
.task.done         { max-height: 44px; opacity: .6;
                     transition-delay: 600ms; }