21

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;
}
4

3 に答える 3

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

より良い解決策...私がテストしたところ、動作します;）

于 2014-03-30T02:10:27.937 に答える