Transformicons - 打开/关闭覆盖内容答案

【问题标题】：Transformicons - Open/close overlay contentTransformicons - 打开/关闭覆盖内容
【发布时间】：2018-12-08 00:46:23
【问题描述】：

我一直在玩Zerodevxtransformicon，但我不确定如何在切换动画后显示叠加层的内容。

这是代码 sn-p。

function openNav() {
  document.getElementById("myNav").style.left = "50%";
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Import webcomponents-lite.js polyfill -->
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>

  <!-- Import zero-transformicon build bundle -->
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">


</head>

<body>
  <zero-transformicon icon="plus-minus" onclick="openNav()"></zero-transformicon>
  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

</html>

有两个函数 openNav() 和 closeNav() 打开和关闭覆盖。

我已经调用了 openNav() 函数来打开叠加层，但是当您单击“减号”动画图标时，我会如何放置 closeNav() 函数，这让我有些困惑。

我希望在单击“+”图标时显示叠加层，并在图标以“-”状态显示动画时通过单击关闭叠加层。

“-”图标应包含在叠加层中 - 类似于叠加层中关闭“X”按钮的方式。

【问题讨论】：

标签： jquery html css icons

【解决方案1】：

我正在查看 Transformicons 的文档，但找不到检测转换开始/结束事件的方法（也许我正在查看旧版本？我发现的内容在 Github 上被列为已弃用）。

不过，Transformicons 似乎添加了一个类 (tcon-transform) 当图标转换为辅助版本时（在本例中为减号）。您可以在openNav() 中使用它来检测图标的状态并执行一个或另一个操作。像这样的东西（评论）：

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }
}

你可以在这里看到它的工作原理：

function openNav() {
  if (event.target.classList.contains("tcon-transform")) {
    document.getElementById("myNav").style.left = "50%";
  } else {
    closeNav();
  }
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Import webcomponents-lite.js polyfill -->
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>

  <!-- Import zero-transformicon build bundle -->
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">


</head>

<body>
  <zero-transformicon icon="plus-minus" onclick="openNav()"></zero-transformicon>
  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

非常感谢阿尔瓦罗！这是一种享受。非常感谢您的帮助。