了解 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

虽然 chliang 没有错，但我觉得解释一般情况的过程很有价值，因为我认为您的理解并不完全正确。

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

1. DOM 元素被选中。

2. 循环遍历这些组，并为每个组创建一个动画，为该特定组的高度设置动画。每次为组设置动画时都会重复使用此动画（即不会创建新动画，只会更改此动画的状态 - 这是animating efficiently 的一个很好的技术）。

   话虽如此，实际上返回的不是对动画本身的引用，而是一个控制动画反转状态的函数。看看the .reversed() documentation 可能会有所帮助。

3. 菜单项循环通过，为每个菜单项添加一个单击事件侦听器。每个菜单项的事件侦听器将该菜单项传递给上一步中返回的函数。在函数内部（从上一步返回），如果菜单项与单击的菜单项相同，则该动画的反转状态设置为与当前相反的状态，通常设置为true ，表示动画将向前播放。但是，如果点击的是同一个并且它的反转状态已经是false，这意味着它已经打开或打开，所以它的反转状态将被更改false。

   对于所有其他动画，反转状态将设置为true，这意味着如果它的进度不为0，它将向后播放。如果它的进度为0，它将不做任何事情。

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

说了这么多，我可能会以不同的方式编写这段代码以提高可读性，like this。

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

Answer 2

首先“动画”是一个包含 5 个函数的数组。

animations.forEach

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

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

将 fun1 替换为动画。