[Sass]造轮子-用@mixin做一个简单的loading动画

话不多说,先上成果!

思考迴路:

撰写keyframes使每个点上下移动(transform),我们命名这个keyframe为waving
每个点都具备相同的基础属性(background-color,border-radius等)为了达到每个点上下错动,我们要设法delay每个点的动画开始时间

在使用Sass前,我们可使的css可以这样写

/*使点上下移动的动画*/@keyframes waving {  25% {    transform: translateY(10px);  }  75% {    transform: translateY(-10px);  }  100% {    transform: translateY(0);  }}.loading .dot {  /*每个点共通的属性*/  display: inline-block;  margin: 0 10px;  width: 15px;  height: 15px;  border-radius: 50%;  background-color: #111;}.loading .dot:nth-child(1) {  /*每个点各自的animation,最后加上他要延迟执行的秒数*/  animation: waving 2s infinite linear 0s;}.loading .dot:nth-child(2) {  /*每个点各自的animation,最后加上他要延迟执行的秒数*/  animation: waving 2s infinite linear -1.5s;}.loading .dot:nth-child(3) {  /*每个点各自的animation,最后加上他要延迟执行的秒数*/  animation: waving 2s infinite linear -3s;}

观察这一份css,我们可以总结出
每个点都使用了animation属性,只是延迟秒数不同,我们可以尝试将animation属性分离成Sass的@mixin,并透过传入参数的方式动态给予延迟秒数,这样一来便可降低大量重複的程式码。

@mixin wavingDelay ($delay) {    animation: waving 2s infinite linear $delay;}

问题的关键点在于如何动态产生延迟秒数,我们可以观察手上拥有的数值,第1个点延迟0秒,第2个点延迟-1.5秒,第3个点延迟-3秒,也就是我们需要一个公式将1/2/3转换为0/-1.5/-3,即为-(1.5*(输入-1))。

接下来我们以Sass的@for迴圈产生代表每个点的数字,并在nth-child()内@include我们上面的wavingDelay,同时将数字传递进入。

.dot{    /*这里省略了基础属性*/    @for $i from 1 through 3{        /*&:nth-child(n) 代表第n个点*/        &:nth-child(#{$i}){            /*运算该点的延迟时间并传递给@mixin*/            @include wavingDelay(#{-(1.5*($i - 1))}s);        }    }}

这个範例展示了使用Sass的@for与@mixin为元素动画增加动态延迟秒数,以下是我在CodePen上的实作。

CodePen