使用 JavaScript 更改可见性时如何使用过渡/动画？答案

【问题标题】：How to use transition/animation when changing visibility with JavaScript?使用 JavaScript 更改可见性时如何使用过渡/动画？
【发布时间】：2021-05-02 03:43:12
【问题描述】：

我希望下拉菜单在点击时使用 JavaScript 淡入淡出，但现在它只是快速出现和消失。

    function toggleDropdown() {
        var x = document.getElementById("myDropdown");
    
        if (x.style.visibility === "visible") {
          x.style.visibility = "hidden";
        } else {
          x.style.visibility = "visible";
      
        }
      }

 #myDropdown{
           visibility: hidden;
           // -webkit-animation: fadeinout 4s linear forwards;
           // animation: fadeinout 4s linear forwards;
           transition: visibility 1s linear 300ms, visibility 300ms;
        }

        <div class="dropdown" id="dropdown">
          <button onclick="toggleDropdown()">Choose connection</button>
          <div id="myDropdown">
            <img src="images/searchicon.png" alt="">
            <input type="text" placeholder="">
            <a href="">Base</a>
            <a href="#blog">Blog</a>
          </div>
        </div>

【问题讨论】：

动画不透明度而不是可见性
"toggleDropdown() "
id=" myDropdown " !== id="myDropdown"
对不起，不小心删除了“。但是我找不到关于 id-name 中空格的错误
可见性不能动画，但不透明度可以

标签： javascript html css transition visibility

【解决方案1】：

编辑：修复可见性

function toggleDropdown() {
  var x = document.getElementById("myDropdown");
  if (x.style.opacity === "1") {
    x.style.opacity = "0";
    x.style.visibility = "hidden";
  } 
  else {
    x.style.opacity = "1";
    x.style.visibility = "visible";
  }
}

#dropdown {
  height:20px;
}
#myDropdown {
  visibility:hidden;
  opacity:0;
  transition:visibility 0.3s linear,opacity 0.3s linear;
}

<div class="dropdown" id="dropdown">
    <!-- <a href="#">Open Menu</a> -->
    <button onclick="toggleDropdown()">Choose connection</button>
    <div id="myDropdown">
      <img src="images/searchicon.png" alt="">
      <input type="text" placeholder="">
      <a href="">Base</a>
      <a href="#blog">Blog</a>
    </div>
  </div>

CSS 过渡仅适用于序数/可计算属性
你应该使用opacity而不是visibility
css

 #myDropdown{
     opacity: 0;
     transition: opacity 1s linear 300ms, opacity 300ms;
 }

 function toggleDropdown() {
     var x = document.getElementById("myDropdown");

     if (x.style.opacity === "1") {
         x.style.opacity = "0";
     } 
     else {
         x.style.opacity = "1";
     }
 }

【讨论】：

【解决方案2】：

使用data-* attribute 存储目标元素的选择器 (ID) 和要切换的类名
即：data-toggle="#myDropdown:is-visible"
使用classList.toggle()切换该类
在 CSS 中定义所需的过渡效果
PS：不要使用内联 JS on* 处理程序 - 就像你希望不要使用内联 style 属性一样。 JS 应该只在一个地方，那就是你的 script。
不要创建只做一件事的函数（即仅切换一个元素的可见性状态） - 而是创建一个可重复用于无数元素的函数：

const toggle = (ev) => {
  const EL_btn = ev.currentTarget;
  const [target, className] = EL_btn.dataset.toggle.split(":");
  const EL_target = document.querySelector(target);
  EL_target.classList.toggle(className);
};

const ELS_toggle = document.querySelectorAll("[data-toggle]");
ELS_toggle.forEach(el => el.addEventListener("click", toggle));

.is-invisible {
  transition: 0.6s;
  opacity: 0;
  visibility: hidden;
}
.is-visible {
  opacity: 1;
  visibility: visible;
}

<button data-toggle="#myDropdown:is-visible">TOGGLE</button>
<div id="myDropdown" class="is-invisible">ANY CONTENT YOU WANT TO SHOW</div>

【讨论】：