在进入滚动的视口时，正在制作一个字体很棒的图标，以便CSS制作动画。只有在Mac上的各种浏览器（Chrome、Safari、Firefox）中打开“开发人员工具”面板时，才会按预期运行。

它在iPhone 6+上的iOS 12上的Chrome中也能工作。

通过向元素添加一个新的throwaway类来实现，然后在进入视口时用动画CSS替换该类。

对此做了一些研究，这可能是一个DOM加载问题——这对这个刚出生的开发人员来说是一个深层次的问题！

JS被放入代码段插件中，如下所示：

<? php
function playon_view(){ //wrap it in php
?>
<script>

const animateHTML = function() {
    let elems;
    let windowHeight;

    function init() {
        elems = document.querySelectorAll(\'.fodder\'); //new throwaway class
        windowHeight = window.innerHeight;
        addClass();
        addEventHandlers();
        checkPosition();
    }

    function addClass() {
        const testarray = document.getElementsByClassName(\'fa-quote-left\'); //target the quote icon
        for (let i = 0; i < testarray.length; i++) {
            testarray[i].className += \' fodder\'; //add the new class
        }
    }

    function addEventHandlers() {
        window.addEventListener(\'scroll\', checkPosition);
        window.addEventListener(\'resize\', init);
    }

    function checkPosition() {
        for (let i = 0; i < elems.length; i++) {
            const positionFromTop = elems[i].getBoundingClientRect().top;
            if (positionFromTop - windowHeight <= 0) {
                elems[i].className = elems[i].className.replace(
                    \'fodder\', //throw away the class
                    \'quotate\', //replace the class with the animation class
                );
            }
        }
    }
    return {
        init,
    };
};
animateHTML().init();

</script>
<?php
}
add_action(\'wp_footer\', \'playon_view\');