代码之家 › 专栏 › 技术社区 › Filippo

显示:使用纯Javascript转换之前的内联块

transform css-transitions css javascript

-1

Filippo · 技术社区 · 2 年前

我正在尝试设置一个隐藏菜单框的动画,使其在鼠标悬停在按钮上时显示并向下滑动。它工作正常,但在添加过渡时 display:inline-block -> display:none -> 显示:内联块 过渡消失。

我已经在jQuery中看到了一些关于解决方案的帖子,但没有一篇是纯JavaScript的,如果不是一篇使用EventListener的帖子(我无法将其应用于我的案例)。

我尝试将JS分为两个函数,一个用于显示块,另一个用于更改类。它不起作用。一种方法是添加类似EventListener的东西,它将在显示属性更改后调用函数(仅在JS中添加它似乎是不够的)。感谢您的帮助。

这里是代码:

function overbutton(divname) {
  element = document.getElementById(divname);
  if (element.className == "menu_hidden menu_about") {
    //element.style.display ="inline-block";
    element.className = "menu_shown menu_about";
  } else {
    //element.style.display ="none";
    element.className = "menu_hidden menu_about";
  }
}

function onmenu(divname) {
  //element.style.display ="inline-block";
  element = document.getElementById(divname);
  element.className = "menu_shown menu_about";
}

function outmenu(divname) {
  //element.style.display ="none";
  element = document.getElementById(divname);
  element.className = "menu_hidden menu_about";
}

.menu_about {
  background-color: white;
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #2B2B2B40;
  -webkit-box-shadow: 0px 0px 10px #2B2B2B40;
  -moz-box-shadow: 0px 0px 10px #2B2B2B40;
  position: absolute;
  padding: 20px;
}

.menu_hidden {
  -webkit-transform: translate(0%, -5px);
  transform: translate(0%, -5px);
  transition: transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

.menu_shown {
  -webkit-transform: translate(0%, 5px);
  transform: translate(0%, 10px);
  transition: transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

<div style="padding-left:100px">

  <button class="button-menu" onmouseover="overbutton('about_menu_div')" onmouseout="overbutton('about_menu_div')">
    menu Button
  </button>

  <!-- add style="display:none;"-->
  <div id="about_menu_div" class="menu_hidden menu_about" onmouseover="onmenu('about_menu_div')" onmouseout="outmenu('about_menu_div')">
    Menu
  </div>

</div>

JSfiddle: https://jsfiddle.net/g0ktx574/

0 回复 | 直到 2 年前

Emiel Zuurbier doctorlee 2 年前

在这种情况下不需要任何JavaScript。您可以使用CSS来解决这个问题,更具体地说 :hover 伪类和 + adjacent sibling selector 。

此外 display 属性不能设置动画。而是使用 opacity 与 visibility 。

.wrapper {
  position: relative;
}

.menu_about {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  height: 100px;
  width: 100px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #2B2B2B40;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility transform;
  transition: 0.3s;
}

.button-menu:hover + .menu_about,
.menu_about:hover {
  opacity: 1;
  visibility: visible;
  transform: translate(0%, 5px);
}

<div class="wrapper">
  <button class="button-menu">
    menu Button
  </button>

  <div class="menu_about">
    Menu
  </div>
</div>

Dorji Tshering 2 年前

参考此处发布的解决方案 Transition translate animation immediately after display block ,我已相应地修改了您的代码。需要记住的一件事是,不能对显示属性设置动画。因此,以下解决方案利用 setTimeout 函数来实现转换属性的起点和终点。我也删除了一些css。你可以看看。您可以根据需要调整转换时间和转换属性。

function overbutton(divname) {
    element = document.getElementById(divname);
    if (element.className == "menu_hidden menu_about") {
        element.style.display ="inline-block";
        element.className = "menu_shown menu_about";
        element.style.transform  = "translate(0%, 10px)";
        element.style.transition = "transform .7s";
        setTimeout(function() {
            element.style.transform = 'translate(0%, 30px)';
            element.style.transition = "transform .7s";
        }, 0)
    }else{
        element.style.display ="none";
        element.className = "menu_hidden menu_about";
    }
}

function onmenu(divname) {
    element.style.display ="inline-block";
    element = document.getElementById(divname);
    element.className = "menu_shown menu_about";
    

}

function outmenu(divname) {
    element.style.display ="none";
    element = document.getElementById(divname);
    element.className = "menu_hidden menu_about";
}

.menu_about{
    background-color:white; 
    height:100px;             
    width:100px; 
    top:20px; 
    left:50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #2B2B2B40;
    -webkit-box-shadow: 0px 0px 10px #2B2B2B40;
    -moz-box-shadow: 0px 0px 10px #2B2B2B40;
    position: absolute;
    padding: 20px;
}

/* hide menu initially */
.menu_hidden {
    display: none;
}

<div style="padding-left:100px">

        <button class="button-menu" onmouseover="overbutton('about_menu_div')" onmouseout="overbutton('about_menu_div')">
          menu Button
        </button>
      
      <!-- add style="display:none;"-->
        <div id="about_menu_div" class="menu_hidden menu_about" onmouseover="onmenu('about_menu_div')" onmouseout="outmenu('about_menu_div')">
          Menu
    </div>
</div>