了解 GSAP 手风琴

Question

我正在尝试理解这篇文章： https://codepen.io/GreenSock/pen/RwVgEgZ

对我来说最难的是理解 select 属性。 AFAIK，这是 <select> HTML 元素的属性，它不存在于此 HTML 中。以及 forEach.

的特殊用法

这是我理解的JS：

// toArray GSAP tool
// https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()

// Store an array with .accordion-group elements
let groups = gsap.utils.toArray(".accordion-group");

// Store an array with .accordion-menu elements
let menus = gsap.utils.toArray(".accordion-menu");

// Apply createAnimation(element) for each array element
// This creates animations for each .accordion-group
// and store it in a variable
let animations = groups.map(createAnimation);

// Add click event listener to each .accordion-menu
// that fires playAnimation(selected) on click
menus.forEach(menu => {
  menu.addEventListener("click", () => playAnimation(menu));
});

// 
function playAnimation(selected) {
  // I don't undestand this particular use of forEach
  // what means animate => animate(selected)?
  // what means selected? I search this property on MDN web docs with no luck
  animations.forEach(animate => animate(selected))
}

// CreateAnimation function
function createAnimation(element) {
  
  // Create colections of .accordion-menu and .accordion-content
  let menu = element.querySelector(".accordion-menu");
  let box  = element.querySelector(".accordion-content");
  
  // GSAP initial set height of .accordion-content to auto
  gsap.set(box, { height: "auto"})

  // GSAP tween reversed. I have no problem with this
  let tween = gsap.from(box, { 
    height: 0, 
    duration: 0.5, 
    ease: "power1.inOut" 
  }).reverse();

  // CreateAnimation() returns the tween reversed if it is not selected
  return function(selected) {

    // Ternary operator. 
    // Store true in the reverse variable if menu is not selected
    // Get !tween.reversed() (This means true if tween is not reversed or false if it is reversed) and store it in reversed variable.
    let reversed = selected !== menu ? true : !tween.reversed();

    // return tween reversed or not reversed regarding reversed variable
    tween.reversed(reversed);
  }
}

简而言之，我想知道的是：animate => animate(selected)是什么意思？ selected 是什么意思？我在 MDN 网络文档上搜索了这个属性，但没有成功。

Answer 1

首先，“动画”是一个具有 5 个功能的数组。

animations.forEach

会将每个函数传递给它旁边的括号，假设第一个函数是 fun1 。

selected 是函数"playAnimation" 的参数，实际上selected 是菜单中的一个菜单，然后传递给函数eg。 fun1 , fun1(selected) 触发器。

将 fun1 替换为动画。

Answer 2

虽然chliang并没有错，但是我觉得解释一下大体上发生的过程是有价值的，因为我认为你的理解不太正确。

以下是 JS 为运行时发生的步骤：

已选择 DOM 个元素。
循环遍历这些组，并为每个组创建动画，以动画显示该特定组的高度。每次对组进行动画处理时都会重新使用此动画（即不会创建新动画，只会更改此动画的状态 - 这是animating efficiently的好技巧）。

话虽如此，实际返回的并不是对动画本身的引用，而是一个控制动画反转状态的函数。看看 the .reversed() documentation.
可能会有所帮助
菜单项循环遍历，为每个菜单项添加一个点击事件侦听器。每个菜单项的事件侦听器将该菜单项传递给在最后一步中返回的函数。在函数内部（从最后一步返回），如果菜单项与被单击的菜单项相同，则该动画的反转状态设置为与当前相反的状态，通常设置为 true，意思是动画会向前播放。但是如果点击的是同一个和它的反转状态已经是 false 这意味着它已经打开或正在打开，所以它的反转状态将被改变 false .

对于所有其他动画，反转状态将设置为true，这意味着如果进度不为0，它将向后播放。如果进度为0，则什么都不做。

需要说明的是，HTML <select> 元素未被使用并且与演示无关。它实现了类似的行为，但不能定制为像这个手风琴一样的行为。

综上所述，我可能会以不同的方式编写这段代码以提高可读性，like this。

如果您还有其他问题，请告诉我。

了解 GSAP 手风琴

Understanding GSAP accordion

javascript

gsap