I am currently working on an array that populates items into an interface. The issue I am facing is that all the items are appearing at once with a slight opacity animation. What I actually want is for each item to appear individually, with a small delay between them so it looks like they are coming in one after another.
Despite my efforts, it seems that no matter what I do, they still show up simultaneously. I have tried using rate limit, but it doesn't seem to make a difference. Below is the snippet of code where I am using splice, and I even attempted to use a setTimeout within the forEach loop.
self.plays = ko.observableArray([]);
self.update = function (period) {
period.Plays.forEach(function (p, index) {
self.plays.splice(0, 0, p);
});
};
CSS
.play-by-plays .play.flash,
.line-scores .line-period.flash {
transition: color 1s ease;
}
.play-by-plays .play,
.line-scores .line-period {
transition: color 1s ease;
}