时间戳

首页 > 解决方案 > 过渡和 Javascript

javascript - 过渡和 Javascript

问题描述

提前道歉，我对过渡完全陌生。

我正在使用 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不可见，又不占用空间。

帮助表示赞赏！

标签： javascripthtmlcsstransition

解决方案

这是因为您使用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 {

推荐阅读