Применение динамических стилей с помощью CSS / SCSS в VUE

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

Если у вас есть уникальный идентификатор для каждой карты, тогда можно использовать 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;
}