Question

我正在尝试使用LESS生成动画延迟。最终结果应类似于：

makeSuite('world', (context) => {
    it('should return', () => {
        console.log(context.age)
    })
})

function makeSuite(name, cb) {
    describe(name, () => {
        let context = {
            age: undefined,
        };
        beforeEach(() => {
            context.age = '123';
        });

        cb(context);
    });
}

我的代码如下：

[data-animation-delay="1"] {
  animation-delay: .5s;
}
[data-animation-delay="2"] {
  animation-delay: 1s;
}

然而，它不起作用。问题似乎出现在@animation-delays: 10; @animation-delay-step: .5; // delay in seconds .animation-delays-loop (@i) when (@i > 0) { [data-animation-step="@{i}"] { @animation-delay = @animation-delay-step * @{i}; animation-delay: @animation-delay~"s"; } .animation-delays-loop(@i - 1); } .animation-delays-loop (@animation-delays);中。任何想法如何纠正它？

Answer 1

好的，我最终做到了这一点：

@animation-delays: 10;
@animation-delay-step: .5; // delay in seconds

.animation-delays-loop (@i) when (@i > 0) {
    [data-animation-step="@{i}"] {
        @animation-delay: @i * @animation-delay-step;
        animation-delay: ~"@{animation-delay}s";
    }
    .animation-delays-loop(@i - 1);
}
.animation-delays-loop (@animation-delays);

像魅力一样工作。

动画使用LESS延迟生成

1 个答案: