Плавный переход для появления элемента - PullRequest
Новая
       92

Плавный переход для появления элемента

0 голосов
/ 30 мая 2020

Когда я нажимаю кнопку, я хочу, чтобы стрелка появлялась плавно. Сейчас я делаю это, добавляя класс show, если стрелка должна быть показана. Я пробовал display: none; -> display: inline-block Я пробовал width: 0 -> width: 100%.
Этот код заставляет стрелку появляться / исчезать при нажатии, но без плавного перехода. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <style>
    span {
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      width: 0;
      overflow: hidden;
      max-width: 0;
      display:none;
    }
    .show {
      width: 100%;
      display: inline;
    }

  </style>
  <script>
    function toggleArrow(elemId) {
      let elem = document.getElementById(elemId);
      if (elem.classList.contains('show')) {
        elem.classList.remove('show');
      } else {
        elem.classList.add('show');
      }
    }
  </script>
</head>
<body>
  <div> Here's the button:
    <button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
  </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

Если вы хотите, чтобы он появился, вы можете использовать 

button.addEventListener("click", function() {
  element.style.opacity = 1;
});
#element {
  opacity: 0;
  transition: 1s;
}

затем, когда вы нажимаете кнопку, элемент стрелки исчезает за одну секунду.

0 голосов
/ 30 мая 2020

Правильно ли заработало? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <style>
    button{
      position:relative;
      padding-right:20px;
      overflow: hidden
    }
    span {
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      overflow: hidden;
      top:50px;
      position: absolute;
      right:5px;
    }
    .show {
      top:0;
    }

  </style>
  <script>
    function toggleArrow(elemId) {
      let elem = document.getElementById(elemId);
      if (elem.classList.contains('show')) {
        elem.classList.remove('show');
      } else {
        elem.classList.add('show');
      }
    }
  </script>
</head>
<body>
  <div> Here's the button:
    <button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
  </div>
</body>
</html>
...