Question

我遇到动画问题，动画在页面加载时开始而不是在滚动时开始。我尝试了几种方法来使它开始滚动，但没有任何效果。我正在使用Wordpress和Salient。

为了更具可读性，我将尽可能地示意HTML和CSS。

HTML：

console.log("ping");
const isInViewport = function (elem) {
    const bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};
let i;
const an = document.getElementsByClassName('svg');
for (i=0; i<an.length; i++) {
  if (isInViewport(an[i])) {
    console.log("pong");
    an[i].style.animation = "draw 15s 1 ease-out";
  }
}

CSS：

(function($){
  $(document).ready(function() {
    $('.svg').waypoint(function() {
      $('.svg-path').css({
        animation: "draw 15s ease-out"
      });
    }, {offset: '0%'});
  })
})(jQuery);

Javascript：在这里，我进行了几次尝试：使用香草JS的尝试，使用Waypoint和jQuery的其他尝试，它们都不起作用，并且在控制台中找不到错误消息...我什至尝试将“ ping”记录到控制台在代码的开头，查看是否已执行，如果if语句为true，则查看“ pong”，以查看在滚动时是否被认为为true ...因为有3次，所以我分别收到了“ ping”和“ pong”三遍SVG，但是当我的SVG不可见时，我收到了三个“乒乓”。我将在此处进行这种尝试，并使用Waypoint和jQuery来进行尝试。带有“乒乓”的香草Javascript：

v-slot:activator="{ on }"

带有Waypoint和jQuery的Javascript：

<template v-slot:activator="{ on }">
  <v-toolbar-title v-on="on">
    <span>All</span>
    <v-icon dark>arrow_drop_down</v-icon>
  </v-toolbar-title>
</template>

<script>
  export default {
    data: () => ({
      items: [
        'All', 'Family', 'Friends', 'Coworkers'
      ]
    })
  }
</script>

另外，如果有任何用处，我将使用Wordpress和Salient，并使用Space X-Chimp的“页眉和页脚脚本插入器”插件在页脚中链接我的js文件。

最好，本杰明

Wordpress Cutsom动画无法开始滚动

0 个答案: