Как сделать плавный переход между табами?

Хочу сделать плавный переход (анимацию) к показываемому блоку. Но знаний пока не хватает.
Удалось добавить якоря на блоки, но происходит резкий переход все равно.
Кто сможет помочь?

<section class="bussines">
            <div class="row">
                <div class="container">
                    <div class="bussines_content">

                        <div class="tabs wow animated animate__fadeInUp" data-wow-duration="2.5s">

                          <ul class="tabs__caption wow animated animate__shakeX" data-wow-iteration="2" data-wow-delay="3s" data-wow-duration="2.5s">
                            <li class="active" data-tab-id="strategy"><a class="links" href="#strategy">Стратегия <br>и бизнес-модель</a></li>
                            <li data-tab-id="process"><a class="links" href="#process">Описание <br>процессов</a></li>
                            <li data-tab-id="interaction"><a class="links" href="#interaction">Взаимодействие <br>и контроль</a></li>
                            <li data-tab-id="legal"><a class="links" href="#legal">Юридический <br>фундамент</a></li>
                            <li data-tab-id="marketing"><a class="links" href="#marketing">Маркетинговая <br>упаковка</a></li>
                          </ul>
                          
                          <div data-tab-id="strategy" id="strategy" class="tabs__content active">
                            <div class="tabs__content-left">
                                <h3>Стратегия и бизнес-модель</h3>
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
                            </div>
                            <img src="img/slide-1.png" alt="">
                          </div>
                          
                          <div data-tab-id="process" id="process" class="tabs__content">
                            <div class="tabs__content-left">
                                <h3>Описание процессов</h3>
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
                            </div>
                            <img src="img/slide-2.png" alt="">
                          </div>
                          
                          <div data-tab-id="interaction" id="interaction" class="tabs__content">
                            <div class="tabs__content-left">
                                <h3>Взаимодействие и контроль</h3>
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
                            </div>
                            <img src="img/slide-3.png" alt="">
                          </div>
                          
                          <div data-tab-id="legal" id="legal" class="tabs__content">
                            <div class="tabs__content-left">
                                <h3>Юридический фундамент</h3>
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
                            </div>
                            <img src="img/slide-4.png" alt="">
                          </div>
                          
                          <div data-tab-id="marketing" id="marketing" class="tabs__content">
                            <div class="tabs__content-left">
                                <h3>Маркетинговая упаковка</h3>
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
                            </div>
                            <img src="img/slide-5.png" alt="">
                          </div>
                          
                        </div><!-- .tabs-->
                    </div>
                    

                </div>
            </div>
        </section>


.tabs {
  position: relative;
  border-top: 1px solid #846a49;
  padding-bottom: 100px;
  height: auto;
}

.tabs__caption {
  max-width: 750px;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}
.tabs__caption a {
  width: 150px;
  height: 45px;
  color: #363636;
  border: 1px solid #846a49;
  border-top: none;
  border-right: none;
  background: #fff;
  cursor: pointer;
  text-align: center;
  padding-top: 7px;
  font-size: 14px;
  display: inline-block;
}
.tabs__caption a:last-child {
  border-right: 1px solid #846a49;
}
.tabs__caption li.active a {
  background: #846a49;
  color: #fff;
}

.tabs__content {
  display: none;
  /* по умолчанию прячем все блоки */
}

.tabs__content.active {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 50px;
}


(function($) {
  $(function() {
  
  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    var $t=$(this);
      $t.addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($t.index()).addClass('active').filter('[data-tab-id="'+$t.data('tab-id')+'"]');
      ChangeUrl($t.text(),'#'+$t.data('tab-id'));
  });
  if(location.hash.length)
    $('.tabs [data-tab-id="'+location.hash.substr(1)+'"]').click();
  
});

  function ChangeUrl(title, url) {
    history.pushState({
      Title: title,
      Url: url
    }, title, url);
  }
})(jQuery);

const smoothLinks = document.querySelectorAll('li[data-tab-id^="#"]');
for (let smoothLink of smoothLinks) {
    smoothLink.addEventListener('click', function (e) {
        e.preventDefault();
        const id = smoothLink.getAttribute('data-tab-id');

        document.querySelector(id).scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    });
};
  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
осваивай анимацию
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы