Nativescript Перезагружает Бесконечные Анимации

#css #angular #animation #nativescript

Вопрос:

Создаем очень простую бесконечную анимацию, которая очень хорошо работает при загрузке. Однако при прокрутке списка воспроизведения анимация остановится на тех, которые больше не видны при прокрутке назад. Возможно, я ищу способ распознать, когда элемент возвращается в поле зрения для перезапуска, например, loaded событие, но при прокрутке. Я также пробовал CSS-анимации, которые имеют тот же результат.

 <GridLayout row="1" col="0" id="placeholderCircle" class="feedBannerBackground" (loaded)="restartCircleSpin($event)"></GridLayout>        

restartCircleSpin(args){
        let grid = args.object ;
        this.animateSpinning(grid);
    }

    animateSpinning(grid) {
        let animation = new Animation([
            {
                rotate: 360,
                duration: 3000,
                target: grid,
                delay: 0,
            }
        ]);

        setTimeout(() => {
            animation.play().then(()=>{
                this.animateSpinning(grid);
            });
        }, 0)
    }
 

Комментарии:

1. IntersectionObserver может быть полезен здесь, чтобы сообщить вам, когда элемент входит/выходит из окна просмотра.