JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<ul>
  <li>1 <button class="up">up</button> <button class="down">down</button></li>
  <li>2 <button class="up">up</button> <button class="down">down</button></li>
  <li>3 <button class="up">up</button> <button class="down">down</button></li>
  <li>4 <button class="up">up</button> <button class="down">down</button></li>
  <li>5 <button class="up">up</button> <button class="down">down</button></li>
</ul>

SCSS

ul {
  margin: 0;
  padding: 0;
  
  li {
    background: #fff;
    line-height: 30px;
    text-align: center;
    list-style: none;
    margin-top: 15px;
    box-shadow: 0px 0px 5px 4px rgba(0,0,0,.1);
    position: relative;
    top: 0;
  }
  
  .trans {
    transition: all .4s ease-in-out;
  }
  
  .scale_up {
      transform: scale(1.1);
      z-index: 10;
    }
    
   .scale_down {
      transform: scale(.9);
      z-index: 9;
    }
}

JavaScript

$('.up').click(function() { swap($(this), 'prev') });
$('.down').click(function() { swap($(this),'next') });



function swap($el, trend) {
	let $cur = $el.parent();
  let $next = $el.parent()[trend]();
  let a = 0;
  
  if($next.height() > $cur.height()) {
  	a = $next.height() - $cur.height();
  }
  
  if(!$next.length) return;
  
  $cur.addClass('trans');
  $next.addClass('trans');
  
  $cur.addClass('scale_up');
  $next.addClass('scale_down');
  
  let cur_offfset_top = $cur.offset().top;
  let prev_offfset_top = $next.offset().top+a;
  
  setTimeout(() => {
  	$cur.offset({top: prev_offfset_top}); 
    $next.offset({top: cur_offfset_top});
    
    setTimeout(() => {
    	$cur.removeClass('scale_up');
    $next.removeClass('scale_down');
    
    setTimeout(() => {
    	$cur.removeClass('trans');
    	$next.removeClass('trans');
      
    	$cur.css('top', '');
    	$next.css('top', '');
      
    	$cur[trend == 'next' ? 'insertAfter': 'insertBefore']($next);
    }, 300);
    }, 300);
    
    
  }, 300);
}