(PureJS / CSS) Переход между скрытой вкладкой div

Question

Когда заголовок читается, я пытаюсь сделать скрытый div-переход между вкладками.

Я не уверен, что то, что я спрашиваю, логично, поэтому уточнить:

При переключении между вкладками (скрытый div) страница будет исчезать между ними, а не только с 0 to 1 но 0 to 1 to 0 от страницы к странице. Имеет ли это смысл?

Мой JS выглядит примерно так:

function btns(evt, btnName) {
  var i, containerMain, tablinks;
  containerMain = document.getElementsByClassName("containerMain");
  for (i = 0; i < containerMain.length; i++) {
    containerMain[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(btnName).style.display = "block";
  evt.currentTarget.className += " active";
  for (i = 0; i < containerMain.length; i++) {
    containerMain[i].scrollLeft = 0;
    containerMain[i].scrollTop = 0;
  }
}

В то время как мой CSS выглядит примерно так:

.containerMain {
  font-family: 'Nunito', sans-serif;
  letter-spacing: 1px;
  font-size: 11px;
  display: none;
  position: relative;
  height: 285px;
  width: 440px;
  border: 0px solid #ccc;
  overflow: auto;
  text-align: justify;
  padding: 0px 8px 0 2px;
  margin: 10px 0 0 10px;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Вот пример желаемый результат, только эта скрипка использует jQuery

Вот моя скрипка, , которая использует чистый JS

P / S: Я все еще очень незнаком с JavaScript или любым другим языком сценариев.

Answer 1

Хитрость заключается в комбинации состояний и переходов . Состояния в этом случае CSS классов. В CSS вы можете определить, показывать или скрывать элемент. Добавляя и удаляя классы, вы можете переключать и / или выбирать эти состояния.

Создайте эти состояния, как показано в примере CSS ниже. Это также сохраняет ваши CSS и HTML разделены. Это хорошая практика при создании веб-сайтов, но также может быть и личным предпочтением.

Вместо анимации используйте свойство transition. Это будет постепенно менять значение, которое изменяется. Таким образом, в этом случае opacity изменится с 0 до 1 и с 1 до 0 в заданный период времени. visibility реквизит не анимирует, но ждет, пока непрозрачность не станет конечной sh, прежде чем изменить свое собственное значение.

.containerMain {
  font-family: 'Nunito', sans-serif;
  letter-spacing: 1px;
  font-size: 11px;
  display: none;
  position: relative;
  height: 285px;
  width: 440px;
  border: 0px solid #ccc;
  overflow: auto;
  text-align: justify;
  padding: 0px 8px 0 2px;
  margin: 10px 0 0 10px;
}

/** 
 * Hidden state.
 * Hide element by default. 
 */
.containerMain {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 1s;
}

/** 
 * Active state.
 * Show element on active class. 
 */
.containerMain.active {
  opacity: 1;
  visibility: visible;
}

В JavaScript используйте Element.classList.add и Element.classList.remove для управления классами на элементах. Они значительно упрощают добавление или удаление определенного класса.

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

function btns(evt, btnName) {
  var i, containerMain, tablinks; 
  containerMain = document.getElementsByClassName("containerMain");
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < containerMain.length; i++) {
    containerMain[i].classList.remove('active');
  }
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove('active');
  }
  document.getElementById(btnName).classList.add('active');
  evt.currentTarget.classList.add('active');
  for (i = 0; i < containerMain.length; i++) {
    containerMain[i].scrollLeft = 0;
    containerMain[i].scrollTop = 0;
  }
}

Дайте мне знать, если у вас есть какие-либо вопросы.