0

When we are using, the v-for in vue.js or ng-repeat in angular, I am not sure when the empty array/object gets filled up with data in after async request (lets say ajax or timeout) the data suddenly flashes even though there is animation added.

One solution I could think of is with some time interval push the data one after another by looping, which is ok.

Is there any way I can achieve with css animation only for repeating, for the repeated data to appear one after another.

Ex: https://codepen.io/anon/pen/oZKQWY

Priya
  • 1,522
  • 1
  • 14
  • 31
  • You will need to use the interval. – Roy J Apr 10 '17 at 16:34
  • slow down the animation – charlietfl Apr 10 '17 at 16:37
  • Without assuming too much, your problem seems to be this: http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink#13276214 Specifically, in your case, the view is not refreshed in the same time interval that the data becomes available. – frishi Apr 10 '17 at 18:15
  • @charlietfl, slowing down animation won't work, but may be creating class in loop, like 1s, 2s, 3s, 4s ... and defining css property with transition 1s, 2s, 3s might, which is again with limit of n (number of times its looping) which cannot be declared in css repetitively. – Priya Apr 10 '17 at 18:28
  • Could you clarify on what it is you want? – Eric Guan Apr 11 '17 at 01:05
  • @EricGuan Is there any way I can achieve with css animation for the repeated data to appear one after another. – Priya Apr 11 '17 at 07:10
  • I don't think so. You can with Vue (aka javascript), and the official docs provides an example https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions – Eric Guan Apr 11 '17 at 15:01

0 Answers0