CSS之变量(二)条形加载条

·  阅读 67
CSS之变量(二)条形加载条

「这是我参与11月更文挑战的第二十五天,活动详情查看:2021最后一次更文挑战」。

往期推荐:

CSS之变量

前言

上一章我们说到了CSS变量,如果还没看的话,请看往期推荐的CSS之变量。接下来,我们就看一下,对于CSS变量来说的神奇操作。

条形加载条

先看实现后的效果:

loading.gif

我们先来想想条形加载条的实现逻辑,它是由若干条直线组成,每条直线通过控制时间差,在不同时间段运行相同的动画,然后形成一个动态的加载效果。这样我们就能想到大概的实现代码。

代码实现


  <ul class="strip-loading">
    <li v-for="v in 6" :key="v"></li>
  </ul>

复制代码
.strip-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  li {
    border-radius: 8px;
    width: 16px;
    height: 70px;
    background-color: white;
    animation: beat 1s ease-in-out infinite;
    & + li {
      margin-left: 20px;
    }
    &:nth-child(2) {
      animation-delay: 200ms;
    }
    &:nth-child(3) {
      animation-delay: 400ms;
    }
    &:nth-child(4) {
      animation-delay: 600ms;
    }
    &:nth-child(5) {
      animation-delay: 800ms;
    }
    &:nth-child(6) {
      animation-delay: 1s;
    }
  }
}
@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(.5);
  }
}
复制代码

观看上面代码,你会发现只有每个 li 的的 animation-delay 不同,其余都是相同的,如果有一个加载条有很多条直线的话,可想而知代码是很难维护的。这个时候我们就可以通过在不同 li 的作用域下声明不同的CSS变量,引入到 animation-delay 中,就可以完美的解决这个问题。

优化后的代码

<ul class="strip-loading">
  <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
</ul>
复制代码
.strip-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  li {
    $time: calc((var(--line-index) - 1) * 200ms);
    border-radius: 8px;
    width: 16px;
    height: 70px;
    background-color: white;
    animation: beat 1s ease-in-out $time infinite;
    & + li {
      margin-left: 20px;
    }
  }
}
@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(.5);
  }
}
复制代码

好,今天就到这里了,今天努力的你依然是最棒的,Bye Bye!!!

分类:
前端
标签:
分类:
前端
标签: