Apply dynamic styles using css/scss in vue

3089 views jquery

I am using animate.css. I have a v-flex looks like this

<v-flex md3 sm6 xs12 v-for="(d, index) in data" :key=""
             class="animated fadeInLeft" :>

I used animated fadeInLeft as a css classes and the fadeInLeft is applying to all the cards initially, so i applied animation-delay and calculated based on the index. As index gets incremented, each card has some delay. This is working as expected. This one wont work in safari i need to apply -webkit-animation-delay. I can add multiple styles in v-style, calculate the value again and assign to -webkit-animation-delay, its not looking good. Is there any thing which i can use jquery or scss mixins or some thing else which needs to assign dynamic style value to an element?

answered question

1 Answer


If you have unique id for each Card then it's possible using SCSS use below SCSS function

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

SCSS output:

#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;

posted this

Have an answer?


Please login first before posting an answer.