Ionic 2 запускает анимацию, когда элемент виден на телефоне

1

Я создаю гибридное приложение с Ionic https://ionicframework.com/. Теперь добавили некоторые модные диаграммы с http://chartjs.org. Все работает отлично, за исключением того, что некоторые диаграммы еще не видны, потому что содержимое слишком велико для отображения. Поэтому, если пользователь прокручивается вниз, диаграмма отображается правильно, но я хочу, чтобы она анимировалась, когда диаграмма находится внутри видимой области области просмотра.

Я пробовал различные плагины там, но ни один из них, похоже, не работает.

https://www.npmjs.com/package/ng2-inview

https://www.npmjs.com/package/angular2-viewport

Некоторые из этих плагинов просто не регистрируют какое-либо событие прокрутки и, следовательно, не работают. Некоторые из них запускаются только один раз (после загрузки страницы).

Поэтому либо я использую эти плагины неправильно, либо они не работают должным образом в виртуальном браузере смартфонов. В любом случае Если у кого-то есть хорошая идея, лучший плагин или какой-либо вклад, как я мог бы сделать эту работу, я был бы очень признателен!

Если нет лучшего способа, я бы решил реализовать это с помощью чистого javascript/jquery, но не зная, работает ли это для каждой платформы. (например, https://www.sitepoint.com/scroll-based-animations-jquery-css3/)

Большое спасибо людям!

Теги:
angular
hybrid-mobile-app
ionic2

1 ответ

0

Извините, если я приду сюда слишком поздно, но, возможно, у меня есть решение для вас.

У меня был подобный случай, и мне нужно было вызвать функцию, когда div отображается на экране. Я попробовал плагины, которые вы разместили, и не смог заставить их работать, поэтому я сделал несколько тестов и узнал, что в элементе <ion-content> я могу сделать следующее:

<ion-content (ionScroll)="functionToTriggerOnScroll()">

И это работает как шарм!

Для вашей конкретной ситуации я предлагаю предоставить id div который содержит диаграммы, которые вы хотите оживить, и сделать следующее:

functionToTriggerOnScroll() {
    if (this.isElementInViewport(document.getElementById('charts-container'))) {
        // animate charts...
    }
}

isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Надеюсь, это поможет!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню