Javascript 当元素进入视口时触发anime.js动画

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

这就是我到目前为止所拥有的，我想这是我遇到麻烦的部分

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

---

您需要以

this.element

作为元素的目标，下面是一个工作示例：

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

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

---

你需要换个房间

---

目标：此

至

目标：此.element

啊，好的，谢谢。你知道我如何瞄准这个.element的父元素吗？你只需初始化父元素的

.waypoint

。我已经更新了画笔，但基本上将

$（'img'）.waypoint（function（）{

更改为

$（'img'）.parent（）.waypoint（function（）{

谢谢。唯一的问题是我正在考虑将其用于没有waypoints的菜单。因此，当单击菜单项时，菜单上会出现一个动画（ul）。类似这样：$（'li:has（ul）”。单击（函数（事件）{event.preventDefault（）；//$（this.parent（'ul'）.addClass（'hide'）；//$（'ul'，this.addClass（'show'）；var cssSelector=anime（{targets:this.element.parent，translateX:250}）；}）；实际上，我刚刚在控制台中搜索了

元素

，看起来您可以只针对

这个元素。元素[parentElement]

：