Как изменить содержимое div по нажатию кнопки с анимацией

Question

Я хочу создать сайт, похожий на этот . Я не могу понять, как сделать анимацию, но я знаю, что делаю что-то не так, потому что это не работает так, как задумано.

$('#c2').hide();

$('#configbtn').click(function() {
  $('#c1').hide();
  $('#c2').show();
});

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="c1" class="container text-center my-auto">
  Lorem ipsum
  <a id="configbtn" class="btn btn-transparent btn-xl js-scroll-trigger" href="#about">dolor sit amet</a>
</div>
<div id="c2" style="display: none;" class="container text-center my-auto">
  Consectetur 
  <a id="selection1" class="btn btn-transparent btn-xl js-scroll-trigger" href="#about">adipiscing elit</a>
</div>

Answer 1

Вы можете попробовать мой код:

JS:

$('#configbtn').click(function() { 
   $('#c1').addClass('hidden').removeClass('visible');
     setTimeout(function(){
        $('#c2').removeClass('hidden').addClass('visible'); 
     }, 300);  
});

Полный код с html и css в здесь , у вас будет анимация, как вы ожидаете