具有旋转和延迟的手写笔循环迭代答案

【问题标题】：Cycle iteration in stylus with rotate and delay具有旋转和延迟的手写笔循环迭代
【发布时间】：2016-06-27 14:55:17
【问题描述】：

我想用 stylus 创建微调器预加载器（如 ios 样式）。

我在petal 元素中有for 循环。我的变量delay & degree 没有正确编译我需要旋转每个第 n 个元素并延迟每个动画

请帮帮我。这是我的代码：

    animation a-preloader 1s infinite linear
    delay = 0s
    degree = 0deg
    for num in (1..12)
        &:nth-child({num})
            animation-delay delay
            transform rotate(degree)
            delay = delay + 0.083s
            degree = degree + 30deg

And here is my playground Codepen

预期结果：

【问题讨论】：

问题出在哪里？你的例子看起来不错
我解决了这个问题）

标签： rotation spinner delay stylus preloader

【解决方案1】：

我们需要声明增量

delay = delay + 0.083s
degree = degree + 30deg

出&:nth-child({num})，像这样：

animation a-preloader 1s infinite linear
delay = 0s
degree = 0deg
for num in (1..12)
    &:nth-child({num})
        animation-delay delay
        transform rotate(degree)
    delay = delay + 0.083s
    degree = degree + 30deg

【讨论】：