当元素在手机上可见时，Ionic 2会触发动画
我正在用离子https://ionicframework.com/构建一个混合应用。现在，a已经用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/)
非常感谢大家！
回答 2
Stack Overflow用户
发布于 2018-08-23 13:16:35
如果我来晚了，我很抱歉，但也许我有一个解决方案给你。
我遇到过类似的情况，需要在屏幕上看到div时触发一个函数。我尝试了你发布的插件，但不能让它们工作，所以我做了一些测试，发现在我的<ion-content>元素上我可以做以下事情：
<ion-content (ionScroll)="functionToTriggerOnScroll()">
这就像一个护身符！
对于您的特定情况，我建议为包含您想要动画的图表的div提供一个id，并执行以下操作：
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)
);
}希望这能有所帮助！
Stack Overflow用户
发布于 2019-11-24 21:28:04
如果您将Waypointsjs与Ionic 4配合使用，您可以尝试类似如下的配置：
const homeContent = document.querySelector('.homeContent')
const innerScroll = homeContent.shadowRoot.querySelector('.inner-scroll')
const element = homeContent.querySelector('.my-element')
const waypoint = new Waypoint({
context: innerScroll,
offset: '30%',
element: element,
handler: function (direction) {
console.log('on scrolling', direction, this.element)
}
})它工作得很好，请查看example => https://proyecto26.com/的网站
你好，尼科尔斯
https://stackoverflow.com/questions/47070739
复制
相似问题
当元素可见时开始动画
当元素被移除时，是否会触发任何动画事件？
Ionic 2摄像头在手机上不工作
当该网站可见时，如何触发动画？
当其他元素单击时，可见性小部件会触发颤动
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
