如何使用SCSS / SASS增加并发div的动画延迟

CSS

猪猪理查德

2020-03-24

我正在尝试复制Windows 8磁贴的加载动画。似乎每个图块都有一个动画延迟，该延迟略高于其前身。我一直在以低效的方式使用nth-child来实现这一点，如下所示。有谁知道我可以更有效地满足任意数量的div的方法？

演示

.results div:nth-child(1) {
  animation-delay: 0.25s;
}
.results div:nth-child(2) {
  animation-delay: 0.5s;
}
.results div:nth-child(3) {
  animation-delay: 0.75s;
}
.results div:nth-child(4) {
  animation-delay: 1s;
}
.results div:nth-child(5) {
  animation-delay: 1.25s;
}
.results div:nth-child(6) {
  animation-delay: 1.5s;
}
.results div:nth-child(7) {
  animation-delay: 1.75s;
}
.results div:nth-child(8) {
  animation-delay: 2s;
}

第3450篇《如何使用SCSS / SASS增加并发div的动画延迟》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Tony凯 2020.03.24

我用这个混入：

@mixin delay($rule, $number, $value) {
  @for $i from 1 to ($number + 1) {
    &:nth-child(#{$i}) {
      -webkit-#{$rule}-delay: (#{$i*$value});
      #{$rule}-delay: (#{$i*$value});
    }
  }
}

.results div{
  @include delay(animation, 8, 0.25s);
}

这样，您也可以重新使用它的过渡。

梅 2020.03.24 
@for $i from 1 through 10 {
  .results div:nth-child(#{$i}) {
    -webkit-animation-delay:(#{$i*0.1s}); 
    animation-delay:(#{$i*0.1s}); 
  }
}

更好的解决方案。。。我测试了，它能起作用;）

斯丁前端 2020.03.24

您可以在Sass中使用for循环来执行以下操作：

@for $i from 1 to 10 {
  .results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}

然后，您可以将10个div设置为所需的任何数量，以实现任意数量的div。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android