如何使用stutrek/scrollMonitor的方法'one'？

Question

我正在使用此代码在视口中触发动画：

    var myElement = document.getElementById("first-text");
    var elementWatcher = scrollMonitor.create(myElement);

    elementWatcher.enterViewport(function() {
            console.log( 'I have entered the viewport' );
            var text = anime({
                    targets: '#first-text',
                    translateX: -600,
                    opacity: 0,
                    direction: 'reverse',
                    easing: 'easeInOutQuart'
            });
    });
    elementWatcher.exitViewport(function() {
            console.log( 'I have left the viewport' );
    });

这使得每次元素进入视口后都会触发动画。如何让它在页面加载后只触发一次？

Answer 1

文档中关于 elementWatcher 的内容不清楚。on/off/one 但作为解决方法，请执行此操作

elementWatcher.exitViewport(function() {
   console.log( 'I have left the viewport' );
   elementWatcher.destroy(); // stops future watcher 
});

如何使用stutrek/scrollMonitor的方法'one'？

How to use stutrek/scrollMonitor's method 'one'?

javascript

jquery

animation

viewport