Question

我正在使用animate.css。我的v-flex像这样

<v-flex md3 sm6 xs12 v-for="(d, index) in data" :key="organization.id"
             class="animated fadeInLeft" :style="{ 'animation-delay': index/8 + 's' 
       }">
<v-card>
-----
</v-card>
</v-flex>

我将animated fadeInLeft用作css类，并且fadeInLeft最初将应用于所有卡，因此我应用了animation-delay并根据索引进行了计算。随着索引的增加，每张卡都有一定的延迟。这正在按预期方式工作。我需要申请-webkit-animation-delay才能在野生动物园工作。我可以在v样式中添加多种样式，然后再次计算值并将其分配给-webkit-animation-delay，这看起来不太好。有什么我可以使用jquery或scss mixins或其他需要为元素分配动态样式值的东西吗？

Answer 1

如果每个卡都有唯一的ID，则可以使用SCSS函数下面的SCSS使用

    $totalDivs: 9;
    @for $i from 0 through $totalDivs {
    #organizationId#{$i} {
        animation-delay: #{$i * 1}s;
        -webkit-animation-delay: #{$i * 1}s;
      }
   }

SCSS输出：

#organizationId0 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

#organizationId1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#organizationId2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#organizationId3 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

#organizationId4 {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

#organizationId5 {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

#organizationId6 {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

#organizationId7 {
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
}

#organizationId8 {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}

#organizationId9 {
  animation-delay: 9s;
  -webkit-animation-delay: 9s;
}

在Vue中使用CSS / SCSS应用动态样式

1 个答案: