Question

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

这是代码段。

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”按钮的方式。

Answer 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>

Transformicons-打开/关闭覆盖内容

1 个答案: