理解GSAP手风琴

Question

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

对我来说，很难理解select属性。AFAIK，这是一个<select> HTML元素的属性，它在这个HTML中不存在。以及forEach的特殊用途。

据我所知，这是联合来文：

// 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 web文档上搜索了这个属性，没有运气。

Answer 1

虽然钱梁没有错，但我想解释一下一般情况下发生的事情是很有价值的，因为我认为你的理解并不完全正确。

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

1. 选择DOM元素。
2. 这些组被循环通过，并为每个组创建一个动画，其高度为该特定组的高度。该动画将被重复使用，每次小组是动画(也就是说，一个新的动画将不会被创建，只有状态的动画将被改变-这是一个很好的高效动画技术)。 也就是说，实际返回的不是对动画本身的引用，而是一个控制动画反转状态的函数。看看.reversed()文档可能会有帮助。
3. 菜单项被循环通过，向每个菜单项添加一个单击事件侦听器。每个菜单项的事件侦听器将该菜单项传递给在最后一步中返回的函数。在函数内部(从最后一步返回)，如果菜单项与单击的菜单项相同，则该动画的反向状态被设置为与当前相反的状态，通常设置为true，这意味着动画将向前播放。但是，如果单击的是相同的，并且它的反向状态已经是false，这意味着它已经打开或打开了，所以它的反向状态将被更改为false。 对于所有其他动画，反向状态将被设置为true，这意味着如果它的进度不是0，它将向后播放。如果它的进度是0，它将什么也不做。

要明确的是，HTML <select>元素并没有被使用，并且与演示无关。它实现了类似的行为，但不能定制为这种手风琴的行为。

有了所有这些，我可能会以一种不同的方式编写这段代码，以提高像这样的可读性。

如果你还有什么问题请告诉我。

Answer 2

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

animations.forEach

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

selected是函数"playAnimation“的副词，实际上所选的是菜单的一个菜单，然后传递给函数例如。fun1，fun1(选定)触发器。

将fun1替换为动画。