Анимация при нажатии css

396

23 июня 2017, 10:23

Хочу попробовать повторить анимационный эффект который, пример его по ссылке пример, при переходе с вкладки на вкладку "О репетиторе" и "отзывы" медленно появляется и исчезает нижний бордер.
Имею конструкцию

<div id="id1" class="class1">
</div>
<div id="id2" class="">
</div>

Где при клике на блок добавляю class1 JSoм
Пробовал втупую скопировать не получилось. Читал материалы о transition и в основном примеры с hover. Подскажите пожалуйста как работать с кликом.

Answer 1

Вместо border лучше использовать псевдо-элемент after, с ним можно придумать больше вариантов анимации

const $tabs = $('.block'); 
 
$tabs.on('click', function () { 
  $tabs.removeClass('active'); 
   
  $(this).addClass('active'); 
})

.block { 
  position: relative; 
  display: inline-block; 
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  padding: 5px 10px; 
  margin-right: 15px; 
  cursor: pointer; 
} 
 
.block:after { 
  content: ''; 
  position: absolute; 
  bottom: -2px; 
  height: 2px; 
  background: #333; 
} 
 
.block.animation1:after { 
  left: 100%; 
  right: 0; 
  transition: left .3s ease; 
} 
 
.block.animation2:after { 
  left: 0; 
  right: 100%; 
  transition: right .3s ease; 
} 
 
.block.active:after { 
  left: 0; 
  right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='block active animation1'> 
  Раз Кнопка 
</div> 
<div class='block animation2'> 
  Два Кнопка 
</div>

Answer 2

В указанном выше ответе не совсем точно копирует действия из примера, так как анимация меняется в зависимости от позиции предыдущего активного пункта, то есть анимация может быть слева на право, либо наоборот. Вот примерно так (красоту оставлю на ваше усмотрение):

$(function() { 
  var menuItem = '.menu-item', 
      $menuItem = $(menuItem); 
 
  $menuItem.on('click', function() { 
    var lastIndex = $(menuItem + '.active').index(), 
        newIndex = $(this).index(); 
     
    $menuItem.removeClass('active active-from-left active-from-right'); 
     
    var className = 'active-from-right'; 
 
    if (lastIndex <= newIndex) { 
        className = 'active-from-left'; 
    } 
 
    $(this).addClass(className).delay(1).queue(function(next) { 
        $(this).addClass('active'); 
        next(); 
    }) 
  }) 
})

.menu-item { 
  display: inline-block; 
  position: relative; 
} 
.menu-item.active-from-left.active:before { 
  right: 0px; 
} 
.menu-item.active-from-left:before { 
  content: ''; 
  position: absolute; 
  bottom: 0px; 
  left: 0px; 
  right: 100%; 
  height: 2px; 
  background: red; 
  transition: all .4s; 
} 
.menu-item.active-from-right.active:before { 
  left: 0; 
} 
.menu-item.active-from-right:before { 
  content: ''; 
  position: absolute; 
  bottom: 0px; 
  left: 100%; 
  right: 0; 
  height: 2px; 
  background: red; 
  transition: all .4s; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class='menu-item active active-from-left'>Пункт 1</div> 
<div class='menu-item'>Пункт 2</div> 
<div class='menu-item'>Пункт 3</div>