GSAP Javascript, если еще заявление горе

Question

Я создаю базовое приложение для онлайн-банкинга с использованием HTML, CSS и JS.

Пока у меня есть экран недавней транзакции и простая анимация для открытия описания каждой отдельной транзакции.

Я использовал GSAP для создания анимации и jQuery для обработки элементов.

Тем не менее, я столкнулся с проблемой закрытия окна описания после его открытия.

СОХРАНИТЕ ЗДЕСЬ, а вот 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, чтобы решить, какую анимацию воспроизводить, в зависимости от того, открыто ли окно описания или нет.

Я дизайнер, который учится программировать, я приму любой совет, который смогу получить.

Answer 1

У вас есть правильная идея, но var open = false; находится в неправильном объеме. Как это написано, open определяется как false каждый раз, когда вызывается обработчик щелчков, вы хотите поместить его в родительскую область: вне обработчика щелчков, до того, как обработчик щелчков будет вызван.

РЕДАКТИРОВАТЬ, так как вы хотите отслеживать "открытое" состояние каждого элемента, вам необходимо создать замыкание для каждого элемента. Вы можете сделать это с помощью .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;
        }


      });


    });
});