GSAP Javascript if else 语句问题

Question

我正在使用 HTML、CSS 和 JS 构建一个基本的网上银行应用程序。

到目前为止，我有最近的交易屏幕和用于打开每笔交易描述的简单动画。

我使用 GSAP 创建动画，jQuery 处理元素。

但是，我运行在描述 window 打开后关闭时遇到了问题。

CODEPEN HERE，这里是 JS：

$(document).ready(function() {
  $('.list li').click(function() {

    var i = $(this).find('i');
    var li = $(this);
    var desc = $(this).next();
    var tl = new TimelineMax({paused:false});
    var open = false;

    if (open === true) {
      tl.to(i, .3, {rotation: 0})
        .to(li, .3, {borderBottom: 'none', delay: -.2})
        .to(desc, .3, {height: '0', padding: '0', delay: -.2});
      open = false;
    } else {
      tl.to(i, .3, {rotation: 90})
        .to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
        .to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
      open = true;
    }


  });


});

我使用 if 语句根据描述 window 是打开还是关闭来决定播放哪个动画。

我是一名学习编码的设计师，我会采纳任何我能得到的建议。

Answer 1

你的想法是对的，但是var open = false;是在错误的范围内。它的编写方式，每次调用点击处理程序时，open 都定义为 false，您想将它放在父范围内：在点击处理程序之外，在点击处理程序被调用之前。

EDIT 因为你想跟踪每个元素的 "open" 状态，你需要为每个元素创建一个 closure元素。您可以使用 .each() 来做到这一点。

你可以这样做：

$(document).ready(function() {

  $('.list li').each(function() {

     var open = false;  // <-- Put "open" here

     $(this).click(function() {

        var i = $(this).find('i');
        var li = $(this);
        var desc = $(this).next();
        var tl = new TimelineMax({paused:false});
        // get rid of "open" here

       if (open === true) {
          tl.to(i, .3, {rotation: 0})
            .to(li, .3, {borderBottom: 'none', delay: -.2})
            .to(desc, .3, {height: '0', padding: '0', delay: -.2});
           open = false;
        } else {
           tl.to(i, .3, {rotation: 90})
             .to(li, .3, {borderBottom: '2px solid #95a5a6', delay: -.2})
             .to(desc, .3, {height: '55px', padding: '5px', delay: -.2});
           open = true;
        }


      });


    });
});

GSAP Javascript if else 语句问题

GSAP Javascript if else statement woes

javascript

jquery

html

css

gsap