javascript - 了解 GSAP Accordion

Question

我试图理解这篇文章:
https://codepen.io/GreenSock/pen/RwVgEgZ
对我来说最难的是理解 select属性(property)。 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

虽然 chliang 没有错，但我觉得解释一般情况下发生的过程很有值(value)，因为我认为您的理解并不完全正确。
以下是运行 JS 时发生的步骤:

DOM 元素被选中。

循环遍历组，并为每个组创建动画，该动画为该特定组的高度设置动画。每次为组设置动画时都会重新使用此动画(即不会创建新动画，只会更改此动画的状态——这是 animating efficiently 的一个好技巧)。
话虽如此，实际返回的不是对动画本身的引用，而是控制动画反转状态的函数。查看 the .reversed() documentation 可能会有所帮助.

菜单项循环通过，为每个菜单项添加一个单击事件监听器。每个菜单项的事件监听器将该菜单项传递给在最后一步中返回的函数。在函数内部(从上一步返回)，如果菜单项与单击的菜单项相同，则该动画的反转状态设置为与当前相反，通常设置为 true ，意味着动画将向前播放。但是，如果它是被点击的同一个并且它的反转状态已经是 false这意味着它已经打开或打开，所以它的反转状态会改变false .
对于所有其他动画，反转状态将设置为 true ，意思是如果它的进度不为 0，它将向后播放。如果它的进度为 0，它什么都不做。

需要明确的是，HTML <select>元素未被使用且与演示无关。它实现了类似的行为，但不能像这个 Accordion 一样进行定制。
说了这么多，我可能会以不同的方式编写这段代码以提高可读性， like this .
如果您还有其他问题，请告诉我。