Javascript / CSS вкладок с эффектом затухания

Question

Я пытаюсь добиться вкладок, которые при переходе с одной на другую исчезают. Часть кода, которую я использую, работает, но есть одна проблема. Когда я перехожу со следующей вкладки к предыдущей, возникает сбой, при котором я вижу в течение одной секунды состояние изменения последней вкладки перед исчезновением.

The HTML:

function openSvc(evt, svc) {
  var i, x, tablinks, opacitys;
  x = document.getElementsByClassName("svc");
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove('display-yes');
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(svc).classList.add('display-yes');
  evt.currentTarget.className += " active";
}

.svc {
  opacity: 0;
  position: absolute;
  transition: .3s;
}

.display-yes {
  opacity: 1;
  position: relative;
}

<div class="tab">
  <button class="tablink" onclick="openSvc(event,'dev')"> Desenvolvimento de software </button>
  <button class="tablink active" onclick="openSvc(event,'it')"> Infraestruturas IT </button>
  <button class="tablink" onclick="openSvc(event,'design')"> UX / UI Design </button>
  <button class="tablink" onclick="openSvc(event,'consult')"> Consultoria </button>
</div>

<div id="dev" class="svc display-yes">
  <p>lorem ipsum1

</div>

<div id="it" class="svc">
  <p>lorem ipsum2
</div>
<div id="design" class="svc">
  <p>lorem ipsum3

</div>

<div id="consult" class="svc">
  <p>lorem ipsum4

</div>

Пример: https://jsfiddle.net/4fz01c2o/

Заранее благодарим за помощь!

Answer 1

у вас разные проблемы: использование абсолютной позиции для скрытых элементов всегда вызовет проблемы с отображением. Я предлагаю использовать родительский div с глобальным размером (и цветом), и каждая вкладка внутри находится в одной и той же абсолютной позиции внутри.

Ваш вопрос неясен, и я полагаю, вы ожидаете ожидания окончания постепенного исчезновения, прежде чем начинать постепенное появление на следующей вкладке. поэтому вам нужно использовать событие transitionend для обнаружения финиша затухания sh

Я также предлагаю использовать делегирование событий для всех кнопок вкладок с помощью атрибута информации о данных, что делает код html больше надежный и менее JS код

, поэтому этот код: (с переходом = одна секунда для тестирования)

const tabButtons = document.querySelector('div.tab')
  ,   buttonTabs = document.querySelectorAll('div.tab > button.tablink')
  ,   tabData    = [...document.querySelectorAll('div.svc')].reduce((res,eTab)=>
        {
        res.push( { id:eTab.id, disp:eTab.classList.contains('display-yes'), elm: eTab} )
        return res
        },[])

tabButtons.onclick =e=>
  {
  if (!e.target.matches('button.tablink'))   return // ignore others clicks outsides 

  let currentTab = tabData.find(tb=>tb.disp)
    , newTab     = tabData.find(tb=>tb.id===e.target.dataset.tabId)   

  if (newTab.id != currentTab.id )
    {
    currentTab.elm.addEventListener('transitionend',setNewTab)
    currentTab.elm.classList.remove('display-yes')
    currentTab.disp = false

    buttonTabs.forEach(bt=>bt.classList.remove('active'))
    e.target.classList.add('active')
    }
  function setNewTab()
    {
    currentTab.elm.removeEventListener('transitionend',setNewTab)
    newTab.elm.classList.add('display-yes')
    newTab.disp = true
    }
  }

#all-svc {
  position:relative;
  width:500px; 
  height:200px;
  background-color:#00488ab5;
  margin-top: 1em;
  }
.svc{
  opacity:0;
  transition: opacity 1s;
  position:absolute;
  top: 0;
  left:0;
  padding: 0 0.5em;
  }
.display-yes{
  opacity:1;
  }
.tablink{
  background-color:#0000ffb5;
  }
.active{
  background-color:#ff0000b5;  
  }

<div class="tab">
  <button class="tablink active" data-tab-id="dev"> Desenvolvimento de software </button> 
  <button class="tablink" data-tab-id="it"> Infraestruturas IT </button> 
  <button class="tablink" data-tab-id="design"> UX / UI Design </button> 
  <button class="tablink" data-tab-id="consult"> Consultoria </button> 
</div>

<div id="all-svc">
  <div id="dev" class="svc display-yes">
    <p>lorem ipsum 1</p>
  </div>
  <div id="it" class="svc">
    <p>lorem ipsum 2 lorem ipsum 2</p>
  </div>
  <div id="design" class="svc">
    <p>lorem ipsum 3 ipsum 3 lorem 3</p>
  </div>
  <div id="consult" class="svc">
    <p>lorem ipsum 4 lorem ipsum ipsum ipsum 4</p>
  </div>
</div>

<div style="width:500px; height:200px; background-color:#c2c2c2;">
  <p> 
  lorem ipsum lorem ipsum
  </p>
</div>

Answer 2

Я не совсем уверен, какой эффект вы здесь ищете. Решение G-Cyrillus работает, но похоже, что вы немного теряете эффект затухания.

Итак, чтобы сохранить этот эффект, вам необходимо удалить правило position: relative, примененное к .display-yes.

Это было неправильно с позицией div. В этом случае вам необходимо добавить контейнер position: relative;, чтобы сохранить на месте блоки .svc.

function openSvc(evt, svc) {
  var i, x, tablinks, opacitys;
  x = document.getElementsByClassName("svc");
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove('display-yes');
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(svc).classList.add('display-yes');
  evt.currentTarget.className += " active";
}

.svc-container {
  position: relative;
  width: 500px;
  height: 200px;
  margin-top: 1rem;
  background-color: lightblue;
}

.svc {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
}

.svc p {
  margin: 0; /* To be consistent with the next block*/
}

.display-yes {
  opacity: 1;
}

.tablink {
  background-color: blue;
}

.active {
  background-color: red;
}

<div class="tab">
  <button class="tablink active" onclick="openSvc(event,'dev')"> Desenvolvimento de software </button>
  <button class="tablink" onclick="openSvc(event,'it')"> Infraestruturas IT </button>
  <button class="tablink" onclick="openSvc(event,'design')"> UX / UI Design </button>
  <button class="tablink" onclick="openSvc(event,'consult')"> Consultoria </button>
</div>
<div class="svc-container">
  <div id="dev" class="svc display-yes">
  <p>lorem ipsum1</p>
  </div>
  <div id="it" class="svc">
    <p>lorem ipsum2</p>
  </div>
  <div id="design" class="svc">
    <p>lorem ipsum3</p>
  </div>
  <div id="consult" class="svc">
    <p>lorem ipsum4</p>
  </div>
</div>

<div style="width:500px; height:200px; background-color:#c2c2c2;">
  <p>
    lorem ipsum lorem ipsum
  </p>

</div>