Анимация табуляции для мобильных устройств

Question

У меня есть вкладка с четырьмя элементами, которые укладываются сверху в мобильные устройства. Мне нужно анимировать щелчок li для анимации снизу. Мне удалось сделать это с помощью некоторой анимации CSS.

Пожалуйста, проверьте скрипку - https://jsfiddle.net/afelixj/wf0y9wbx/3/

Я не в состоянии контролировать движение вверх. Нижние элементы не всегда движутся вместе.

Answer 1

Проблема с вашим исходным кодом заключалась в том, что вы перебирали элементы dom, которые были в том же порядке, каждый раз, когда нажимали li.

$('li').on('click', function(){ 
    $('li').attr({ 
     style: '' 
    }); 
    var place = $(this).attr("class"); 

    if (typeof place !== "undefined"){ 
     place = parseInt(place.replace("li-","")); 
    }else{ 
     place = $(this).index() + 1; 
    } 

    $(this).css('z-index', '2').attr('class','').addClass('li-4'); 

    $('li').not($(this)).each(function(){ 
     var thisPlace = $(this).attr("class"); 
     if (typeof thisPlace !== "undefined"){ 
      thisPlace = parseInt(thisPlace.replace("li-","")); 
     }else{ 
      thisPlace = $(this).index() + 1; 
     } 

     if(thisPlace > place){ 
      $(this).attr('class',''); 
      $(this).addClass('li-' + (thisPlace - 1)); 
     } 
    }); 
}); 

Это не самый изящный ответ, но он работает. Это проверяет класс сначала и анализирует номер как переменную «место», если класс не существует, он проверяет индекс элемента в пределах ul.