javascript - 当元素进入视口(viewport)时触发 anime.js 动画

Question

我试图在图像或元素进入视口(viewport)时运行 anime.js，但我似乎无法让它工作。我正在尝试使用 waypoints.js

这就是我目前所拥有的，我认为这是我遇到麻烦的“这”部分。

$('img').waypoint(function() {
        var CSStransforms = anime({
          targets: this,
          translateX: 250,
          scale: 2,
          rotate: '1turn'
          });
            }, {
                offset: '100%'
            });

Answer 1

您需要使用 this.element 来定位元素，这是一个工作示例:

CodePen Demo

根据您的问题，您可以将其修改为以下内容:

jQuery(document).ready(function(){
    $('img').waypoint(function() {
        var CSStransforms = anime({
            targets: this.element,
            translateX: 250,
            scale: 2,
            rotate: '1turn'
        });
    }, {
            offset: '100%'
    });
});