Я создаю гибридное приложение с 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/)
Большое спасибо людям!
Извините, если я приду сюда слишком поздно, но, возможно, у меня есть решение для вас.
У меня был подобный случай, и мне нужно было вызвать функцию, когда 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)
);
}
Надеюсь, это поможет!