Нужен плавный переход между табами хелпаните?

Question

[Danya Wyse]

https://codepen.io/iwyse/pen/wvBVKmx

Comments

[ProjectSoft]

Я бы растянул ::after в абсолютной позиции с z-index: 0 и применил бы transition: opacity .3s; к нему.
Т. е. background-image применить именно к псевдо элементу.

Answer 1

[fix0_o]

Flex не подходит. Замени и посмотри.

JS

width_body = screen.width;

function benefits(evt, cityName) {
    var i, tabcontent, tablinks, width;
    tabcontent = document.getElementsByClassName("tabcontent");
    width = (tabcontent[0].offsetWidth) / 2;
    for (i = 0; i < tabcontent.length; i++) {
      
      tabcontent[i].style.transform = "translateX(-500px)";
      tabcontent[i].style.opacity = "0";
      tabcontent[i].style.left = "calc(50% - "+width+"px)";
      tabcontent[i].style.maxWidth = width_body+'px';
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  document.getElementById(cityName).style.opacity = "1";
    document.getElementById(cityName).style.transform = "translateX(0px)";
    evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

CSS
Замени только 1 класс:

.tabcontent {
  display: block;
  position:absolute;
      -webkit-transition: .6s;
      -o-transition: .6s;
      transition: .6s;
  margin:0px 30px 0px 0px;
}