0

I'm trying to put some nice style into my Vuesax table. I want to create an animation that will list data. For now I have created something like this:

<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" class="table-open">

and style:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.table-open{
    animation: 1s ease 0s 1 slideInFromLeft;
}

and this works fine. But I want to list products one by one and I tried something like this:

<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="[{animation: (indextr * 0.1) + 's ease 0s 1 slideInFromLeft'}]">

But this is not working. Any ideas how to fix it? Do I need to write keyframes in some other way?

Dan
  • 59,490
  • 13
  • 101
  • 110
Rade Ilijev
  • 45
  • 5
  • Can you create a fiddle to show your issue? – maxshuty Nov 23 '20 at 11:55
  • Here it is, but don't work here https://jsfiddle.net/jbgh54w1/ – Rade Ilijev Nov 23 '20 at 12:11
  • I tried like :style="[{animation: 'rotate ' + (indextr * 0.3) + 's'}]" and it works, but question is how to implement to slideInFromLeft? – Rade Ilijev Nov 23 '20 at 12:31
  • @Dan not really helpful for what am I looking – Rade Ilijev Nov 23 '20 at 13:02
  • @RadeIlijev - Sorry, I chose the wrong duplicate! Now it's correct: https://stackoverflow.com/questions/47283989/why-are-css-keyframe-animations-broken-in-vue-components-with-scoped-styling The problem is with scoped styling and keyframes. – Dan Nov 23 '20 at 14:07

0 Answers0