Transformicons - открывает / закрывает оверлейный контент - PullRequest
Новая
       3

Transformicons - открывает / закрывает оверлейный контент

0 голосов
/ 08 декабря 2018

Я играл с 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» воверлей.

1 Ответ

0 голосов
/ 08 декабря 2018

Я просматривал документацию для 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...