Скрытие элемента с анимацией по событию?

$('.tabs > .tabs__nav > .nav__item > .nav__link').click(function() { 
        // основной контейнер вкладок 
        var tab_container = $(this).parents('.tabs'); 
        // настоящая вкладка 
        var tab_link = $(this); 
        // настощий контент вкладки 
        var tab_content = tab_container.find('[data-tab-content-name="' + tab_link.attr('data-tab-link-name') +'"]'); 
 
        // если вкладка уже активна, то манипуляции не проводим 
        if(tab_link.hasClass('active')) 
        { 
            return false; 
        } 
        // если вкладка не активна 
        else 
        { 
            var tab_link_old = tab_link.parents('.tabs__nav').find('> .nav__item > .nav__link.active'); 
            tab_link_old.removeClass('active'); 
            tab_link.addClass('active'); 
 
            var tab_content_old = tab_content.parents('.tabs__content').find('> .content__item.active'); 
            tab_content_old.removeClass('active'); 
            tab_content.addClass('active'); 
        } 
}); 
 
$('.tabs').on('transitionend', '.content__item', function() { 
  if ($(this).hasClass('active')) { 
    $(this).prependTo($(this).parent()) 
  } 
})

* 
{ 
  padding: 0; 
  margin: 0; 
} 
 
.tabs > .tabs__nav 
{ 
  list-style-type: none; 
  margin-top: initial; 
  margin-bottom: initial; 
  margin-left: initial; 
  margin-right: initial; 
  -webkit-padding-start: initial; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
} 
 
.tabs > .tabs__nav > .nav__item > .nav__link 
{ 
  transition: all 0.3s linear 0s; 
  padding: 10px 20px; 
  border: none; 
  display: block; 
} 
 
.tabs > .tabs__nav > .nav__item > .nav__link.active 
{ 
  background: antiquewhite; 
} 
 
.tabs > .tabs__content > .content__item 
{ 
  position: absolute; 
  width: 100%; 
  box-sizing: border-box; 
  transition: all 0.3s linear 0s; 
  opacity: 0; 
  transform: translate(0, 50px); 
  padding: 20px; 
} 
 
.tabs > .tabs__content > .content__item.active 
{ 
  position: static; 
  background: antiquewhite; 
  opacity: 1; 
  transform: translate(0, 0); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--такой id для идентификации именно этих табов, т.к. их может быть на странице десяток другой--> 
<div id="tabs-6543" class="tabs"> 
 
  <ul class="tabs__nav"> 
    <li class="nav__item"> 
      <a href="#" class="nav__link active" data-tab-link-name="tab-1">Ссылка вкладки 1</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#" class="nav__link" data-tab-link-name="tab-2">Ссылка вкладки 2</a> 
    </li><li class="nav__item"> 
      <a href="#" class="nav__link" data-tab-link-name="tab-3">Ссылка вкладки 3</a> 
    </li> 
  </ul> 
 
  <ul class="tabs__content"> 
    <li class="content__item active" data-tab-content-name="tab-1"> 
      Контент вкладки 1<br> 
      Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. 
    </li> 
    <li class="content__item" data-tab-content-name="tab-2"> 
      Контент вкладки 2<br> 
      Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. 
    </li> 
    <li class="content__item" data-tab-content-name="tab-3"> 
      Контент вкладки 3<br> 
      gfjskgdfklgkg  gdfskg;l 43-0 kgop34g-0 ;ldfg 34-igokglpdmf' lg-43 
      gdkfmg kdf;jgdf;jgokj fdogm 04-3ti043i tld;fgkld;f  
      gf jdigjdfjgdfklg934t-043i gkodfj-340asvl; 943ti-43ti-034 
    </li> 
  </ul> 
 
</div> 
 
<div style="background: #c3e6cb"> 
Блок с текстом после табов. 
</div>