Apply dynamic styles using css/scss in vue

3089 views jquery
6

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="organization.id"
             class="animated fadeInLeft" :>
<v-card>
-----
</v-card>
</v-flex>

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

9

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?

JD

Please login first before posting an answer.