Question

我正在使用Gsap创建漂亮的动画。

我即将在此处制作错误的Javascript，希望能提供一些帮助。

let navOpen = false;

const navAnim = () => {
  var tl = gsap.timeline({})
  tl.to(nav, 1, { x: 0, y: 0, z: 0 });
}

const checkNavigation = () => {
  navOpen ? navAnim.tl.play() : navAnim.tl.reverse()
}

const navigation = () => {
  if (!navOpen) {
    navOpen = true;
    checkNavigation();
  } else {
    navOpen = false;
    checkNavigation();
  }
}

navBrgr.addEventListener("click", () => {
  navigation();
});

打开导航功能只是创建一个新的时间轴，然后在其中执行代码。

要关闭我的导航，它需要做的完全一样，但是这次将其反转。

此刻我的代码指向Cannot read property 'play' of undefined，这很有意义，因为我无法从此tl函数访问navigation();。我该怎么办？

我很愚蠢，以为return()内的navAnim()就足够了，a。

非常感谢

Answer 1

您需要确保navAnim返回tl，以便可以在checkNavigation函数中使用该值。

将您的navAnim和checkNavigation函数更新为以下内容：

const navAnim = () => {
  var tl = gsap.timeline({})
  tl.to(nav, 1, { x: 0, y: 0, z: 0 });
  return tl
}

const checkNavigation = () => {
  const tl = navAnim()
  navOpen ? tl.play() : tl.reverse()
}

应该可以解决问题。

更清洁的代码建议：

let navOpen = false;
const tl = gsap.timeline({})
tl.to(nav, 1, { x: 0, y: 0, z: 0 });

const toggleNav() {
  navOpen = !navOpen
  if (navOpen) tl.play()
  else tl.reverse()
}

navBrgr.addEventListener("click", () => {
  toggleNav();
});

这会阻止创建一堆可以通过简单的衬板解决的功能。

从另一个函数访问另一个属性

1 个答案:

更清洁的代码建议：