过渡和 Javascript

Question

提前道歉，我对转换完全陌生。

我正在使用 CSS 和 JavaScript 来尝试一个菜单，该菜单在单击时平滑向下滑动，并在再次单击时同样平滑地返回。

我试图模仿一个示例动画，如下所示：https://codepen.io/shshaw/pen/gsFch

我的相关代码如下：

HTML

<div class="sort">
  <div class="sort-options">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

CSS

.sort-options {
  margin: 20px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  transition: display 3s ease-out;
}

JS

  const sortDiv = document.querySelector('.sort') 
  sortDiv.addEventListener('click', function() {
    const sortOptions = document.querySelector('.sort-options');
    if (sortOptions.style.display === 'none') {
      sortOptions.style.display = 'flex';
    } else {
      sortOptions.style.display = 'none';
    }
  }); 

点击确实隐藏和显示元素，但没有给出动画。我尝试仅使用 CSS 来实现效果，但我发现了相同的结果，它确实隐藏和显示，但没有平滑向下滑动。这让我觉得我在 CSS 上做得不对。

仅 CSS 尝试：

.sort:hover .sort-options {
  display: flex;
}

.sort-options {
  visibility: hidden;
  margin: 20px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  transition: all 3s ease-in-out;
}

如果您想查看我的完整代码，请点击此处： https://wulfenn.github.io/todolist

我浏览了stackoverflow，似乎不支持显示作为过渡效果，但我不确定如何使用可见性来实现效果，同时如果div不可见则不占用空间。

帮助表示赞赏！

Answer 1

这是因为您使用display 进行动画处理，而不是动画处理。您正在寻找opacity 和pointer-events，它们可以提供相似的结果。

下面是一个例子

.sort {
  width: 100px;
  
  text-align: center;
}

.sort-heading {
  position: relative;
  z-index: 2;

  background-color: white;
}

.sort:hover .sort-options {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
}

.sort-options {
  display: flex;
  
  width: 100%;
  
  flex-direction: column;
  align-items: flex-start;
  
  margin: 20px;
  
  font-size: 20px;
  
  transition: all 3s ease-in-out;
  
  transform: translateY(-50px);
  opacity: 0;
  pointer-events: none;
}

<div class="sort">
  <div class="sort-heading">Sort</div>
  <div class="sort-options">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

首先我删除了不必要的visibility: hidden。我还让它总是有display: flex，然后简单地删除opacity 让它淡入。我还使用了pointer-events，这样鼠标在隐藏时不会与之交互。我使用了transform: translateY(-50px)，所以它会下降一些。我还必须添加一个可以悬停的标题以使菜单出现 (sort-heading)。它还用于隐藏选项。

编辑

为了不占用空间，只需将position: absolute 添加到.sort-options。

如果你想只用 JS 来控制它，请将你的 CSS 行更改为 .sort:hover .sort-options { 到 .sort.active .sort-options {

现在您可以使用

轻松打开和关闭下拉菜单

//Open
document.querySelector('.sort').classList.add('active');

//Close
document.querySelector('.sort').classList.remove('active');

如果您仍然想要悬停事件，您可以使用 JS 或 CSS 来控制它

JS

var sortEle = document.querySelector('.sort');

sortEle.onmouseenter = function() {
    //Open
    sortEle.classList.add('active');
}

sortEle.onmouseleave = function() {
    //Close
    sortEle.classList.remove('active');
}

CSS

制作.sort.active .sort-options {.sort.active .sort-options, .sort:hover .sort-options {

Answer 2

显示为transition 的原因不起作用，是因为没有动画（转换）到/从的值。显示属性更像是开/关。

这是一个简单的例子……

#container {
position: relative;
height: 2rem;
width: 300px;
background-color: blue;
margin: auto;
}

.menu {
position: absolute;
visibility: hidden;
display: flex;
top: 2rem;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: grey;
height: 0rem;
width: 100%;
overflow: hidden;
transition: height 1s ease-in-out, visibility 1s ease-in-out;
}


#container:hover .menu{
visibility: visible;
height: 8rem;
}

<div id='container'>
  <div class='menu'>
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
   </div>
</div>