0

Всем привет, есть вот такой таб. Почему-то для основного текста не применяется свойство transition. При переключении на другую вкладку. В чем может быть проблема?

var btnContainer = document.getElementById("tabs__items");
var btns = btnContainer.getElementsByClassName("tabs__link");


for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
.advantages__tabs {
    display: flex;  
    border: 2px solid #30d5c8;
    padding: 10px;
    min-height: 450px;
    flex: 0 1 50%;
}
.tabs__items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}
.tabs__link {
    align-items: left;
    text-transform: uppercase;
    font-size: 18px;
    color: #3b96df;
    padding: 20px;

    transition: all 0.3s ease 0s;
}
.tabs__link.active {
    color: #18d1c2;
}
.tabs__body {
    margin: auto 0;
}
.tabs__block {
    display: none;
    text-align: justify;
    padding: 20px;
    font-size: 18px;
    line-height: 24px;
}

.tabs__block:target {
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    flex-direction: row;
    
    transition: all 1s ease 1s;
}
<div class="advantages-content">
   <div class="advantages__tabs">
       <nav class="tabs__items" id="tabs__items">
          <a href="#tab_01" class="tabs__link active">Первое преимущество</a>
          <a href="#tab_02" class="tabs__link">Второе преимущество</a>
          <a href="#tab_03" class="tabs__link">Третье преимущество</a>
          <a href="#tab_04" class="tabs__link">Четвертое преимущество</a>
          <a href="#tab_05" class="tabs__link">Пятое преимущество</a>
       </nav>
   <div class="tabs__body">
       <div id="tab_01" class="tabs__block">Первая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque
        </div>
        <div id="tab_02" class="tabs__block">Вторая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        </div>
        <div id="tab_03" class="tabs__block">Третья вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque, optio adipisci!
        </div>
        <div id="tab_04" class="tabs__block">Четвертая вкладка
        </div>
        <div id="tab_05" class="tabs__block">Пятая вкладка. 
        </div>
      </div>
   </div>
</div>

8
  • Для .tabs__link всё работает, а у .tabs__block нет анимируемых свойств.
    – UModeL
    7 ноя 2020 в 14:03
  • Есть у .tabs__block:target анимируемое свойство. Если его переставить просто в .tabs__block тоже не работает.
    – O.Yudin
    7 ноя 2020 в 14:21
  • и какое же свойство там может изменяться и главное - как это должно выглядеть, что должно происходить?
    – UModeL
    7 ноя 2020 в 14:32
  • При нажатии на преимущество, плавно появляется текст. Вот так хотелось бы)
    – O.Yudin
    7 ноя 2020 в 14:44
  • вот, это сразу в вопрос добавлять нужно, чтобы не пришлось выпытывать.
    – UModeL
    7 ноя 2020 в 14:47

1 ответ 1

1

const btnContainer = document.getElementById("tabs__items");
const btns = btnContainer.getElementsByClassName("tabs__link");


for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", (e) => {
    const current = btnContainer.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    e.target.classList.add('active');
  });
}
.advantages__tabs {
  display: flex;
  border: 2px solid #30d5c8;
  padding: 10px;
  flex: 0 1 50%;
}

.tabs__items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}

.tabs__link {
  text-transform: uppercase;
  font-size: 18px;
  color: #3b96df;
  padding: 20px;
  transition: all 0.3s ease 0s;
}

.tabs__link.active {
  color: #18d1c2;
}

.tabs__body {
  overflow: hidden;
}

.tabs__block {
  text-align: justify;
  font-size: 18px;
  line-height: 24px;
  max-height: 0px;
  overflow: hidden;
  
  opacity: 0;
  transform: scale(0) translate(0px, 0px);
  transform-origin: left top;
  
  transition-property: opacity, transform, max-height;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.tabs__block:target {
  opacity: 1;
  transform: scale(1);
  max-height: 200px;
}
<div class="advantages-content">
  <div class="advantages__tabs">
    <nav class="tabs__items" id="tabs__items">
      <a href="#tab_01" class="tabs__link active">Первое преимущество</a>
      <a href="#tab_02" class="tabs__link">Второе преимущество</a>
      <a href="#tab_03" class="tabs__link">Третье преимущество</a>
      <a href="#tab_04" class="tabs__link">Четвертое преимущество</a>
      <a href="#tab_05" class="tabs__link">Пятое преимущество</a>
    </nav>
    <div class="tabs__body">
      <div id="tab_01" class="tabs__block">Первая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque
      </div>
      <div id="tab_02" class="tabs__block">Вторая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div id="tab_03" class="tabs__block">Третья вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque, optio adipisci!
      </div>
      <div id="tab_04" class="tabs__block">Четвертая вкладка
      </div>
      <div id="tab_05" class="tabs__block">Пятая вкладка.
      </div>
    </div>
  </div>
</div>

5
  • Плюсую только за попытку. Я поначалу стал разбирать код, но сразу понял, что это потеря времени, ибо такое право на жизнь не имеет, и будет жёстко переписано в дальнейшем))
    – UModeL
    7 ноя 2020 в 15:54
  • я не про ваш код, а об авторском коде в целом. Насмотрятся "курсов" на YouTube до половины, накопируют рандомных кусков кода... Самое главное, что не думают, но зато спорят. Печально всё это...
    – UModeL
    7 ноя 2020 в 16:06
  • @UModeL вот сейчас вроде вообще нормально, анимацию исчезания только через keyframes можно прикрутить 7 ноя 2020 в 16:11
  • по-хорошему нужно делать с relative/absolute и просто менять видимость блоков через opacity.
    – UModeL
    7 ноя 2020 в 16:20
  • @UModeL ru.stackoverflow.com/a/1198932/331312 тут без absolute 7 ноя 2020 в 16:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.