平滑过渡以使元素出现

Question

当我点击按钮时，我希望箭头顺利滑出。 如果应该显示箭头，我目前正在通过添加“显示”class 来执行此操作。 我试过 display: none; -> 显示：inline-block 我试过宽度：0 -> 宽度：100%。
此代码使箭头出现/消失 onclick，但没有平滑过渡。

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

Answer 1

它工作正常吗？

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

Answer 2

如果你想让它出现，你可以使用

 button.addEventListener("click", function() { element.style.opacity = 1; });

 #element { opacity: 0; transition: 1s; }

然后当您单击按钮时，箭头元素会在一秒钟内淡入。

平滑过渡以使元素出现

问题描述

2 个解决方案

解决方案1
0 2020-05-29 21:24:01

解决方案2
0 2020-05-29 21:53:54

平滑过渡以使元素出现

问题描述

2 个解决方案

解决方案1 0 2020-05-29 21:24:01

解决方案2 0 2020-05-29 21:53:54

解决方案1
0 2020-05-29 21:24:01

解决方案2
0 2020-05-29 21:53:54