时间戳

首页 > 解决方案 > (PureJS/CSS) 隐藏 div 标签之间的淡入淡出

javascript - (PureJS/CSS) 隐藏 div 标签之间的淡入淡出

问题描述

正如标题所示，我试图让我隐藏的 div 在选项卡之间淡出。

我不确定我问的是否合乎逻辑，所以澄清一下：

0 to 1在选项卡（隐藏的 div）之间切换时，页面将在它们之间淡入淡出，不仅仅是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 或任何脚本语言仍然很陌生。

标签： javascriptcss

解决方案

诀窍在于状态和转换的组合。在这种情况下，状态是 CSS 类。在 CSS 中，您可以定义是否显示或隐藏元素。通过添加和删除类，您可以切换和/或选择这些状态。

像下面 CSS 中的示例一样创建这些状态。这也使您的 CSS 和 HTML 保持分离。这是构建网站的好习惯，但也可以是个人喜好。

transition使用该属性代替动画。这将逐渐改变被改变的值。所以在这种情况下，opacity将在给定的持续时间内从0to1和 from 1to变化。道具不会动画，但会等待不透明度完成，然后再更改其自身的值0。visibility

.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;
  }
}

如果您有任何问题，请告诉我。

推荐阅读