Javascript 离子2触发动画时，元素在手机上可见

我正在用Ionic构建一个混合应用程序。现在a已经添加了一些带有的花式图表。所有的工作都很完美，除了一些图表还不可见，因为内容太大，无法显示。因此，如果用户向下滚动，图表将正确显示，但我希望在图表位于视口的可见区域内后，它将显示动画

我已经尝试了各种插件，但它们似乎都不起作用

有些插件不注册任何滚动事件，因此无法工作。有些只会触发一次（页面加载后）

所以要么我用错了这个插件，要么它们在智能手机虚拟浏览器上不能正常工作。无论如何，如果有人有一些好主意，一个更好的插件或任何输入我可以如何使这项工作，我会非常感激

如果没有更好的方法，我会考虑用纯JavaScript /jQuery来实现这一点，但不知道这是否适用于每个平台。（例如）

---

谢谢大家

如果我来晚了，我很抱歉，但也许我有办法给你

我也遇到过类似的情况，需要在屏幕上显示

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)
    );
}

这就像一个符咒

针对您的具体情况，我建议为

div

提供一个

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)
    );
}

functionToTriggerOnScroll（）{
if（this.iselementviewport（document.getElementById（'charts-container'））{
//动画图表。。。
}
}
isElementInViewport（el）{
const rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom如果您将航路点SJS与离子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)
  }
})

它工作得非常好，请查看示例=>

关于这一点，Nicholls
我们有没有办法把它重构成一个角度指令，然后将该指令应用到我们想要制作动画的元素上？