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

Question

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

这是我目前的代码，我认为是“this”部分出了问题。

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

- Scott Hunter

Answer 1

您需要使用 this.element 来定位元素，这里有一个可用的示例：

CodePen 示例

根据您的问题，您需要进行以下修改：

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

- Xhynk

---

$("li:has(ul)").click(function(event){ event.preventDefault(); //$(this).parent('ul').addClass('hide'); //$("ul",this).addClass('show'); var cssSelector = anime({ targets: this.element.parent, translateX: 250 }); }); - Scott Hunter

实际上，我刚刚在控制台中挖掘了element，看起来你可以直接定位到this.element[parentElement]：https://codepen.io/xhynk/pen/pLRbrR?editors=1111 - Xhynk

很遗憾，当我尝试时出现了这个问题，有什么想法吗？无法读取未定义的属性“parentElement”。 - Scott Hunter

抱歉，是否有一种方法可以仅选择第一组菜单项，以便我可以将它们淡出并淡入子菜单。当我尝试时，子菜单不会淡入，因为其父级已经淡出。 - Scott Hunter

我必须离开电脑一会儿，但回来后我可以看看。能否请您发送一个 Codepen 带上您实际的 HTML 标记？ - Xhynk

Answer 2

你需要更改以下内容：

将 targets : this 改为 targets: this.element

- Raza Rafaideen