使用display属性进行JavaScript过渡吗？ [英] JavaScript transition with the display property?

问题描述

当我将某个元素悬停在另一个元素上时是否可以使其淡入，而当鼠标不再位于该元素上时可以使其淡出吗？

我尝试添加一个< CSS中的code> transition ，但这似乎不起作用（我已经预言了，因为实际上是JavaScript，它使使用DOM的div可见...）。 / p>

我在此处

解决方案

起初，我想到了soktinpk的解决方案。可以使用CSS为不透明度设置动画，因此这是最好的选择。

但是，即使不显示，它也会占用空间。为了防止这种情况，可以将其设置为 position：absolute 。

以下是结合@soktinpk想法的更强大的解决方案

为防止这种情况，请在看不见时使用 display：none 将其隐藏。

编辑

实际上， visibility：hidden 在退回时似乎效果更好。

HTML

 < div id = button onmouseover = showMenu（） onmouseout = hideMenu（）> 
<！-将其放置在内部将使其按需要定位-> 
< div id = menu>< / div> 
< / div> 
  

CSS

  #button {
 background-color：rgb（0,0,100）; 
宽度：100像素； 
高度：50像素； 
 margin-top：50px; 
 margin-left：50px; 
头寸：相对； //内部所有绝对定位的元素都相对于此元素
} 
 
 #menu {
 background-color：rgb（0,100,0）; 
宽度：200像素； 
高度：100像素； 
不透明度：0; 
可见性：隐藏； 
过渡：不透明度1s； 
 -webkit-transition：不透明度1s; 
 -moz-transition：不透明度1s； 
 -o-transition：不透明度1s； 
头寸：绝对； //以使其显示在正确的位置
 top：100％;剩余
：0： 
} 
  

JS

  var time_out; 
 var menu = document.getElementById（ menu）; 
 
函数showMenu（）{
 clearTimeout（time_out）; 
 menu.style.visibility =可见; 
 menu.style.opacity = 1; 
} 
 
函数hideMenu（）{
 clearTimeout（time_out）; 
 menu.style.opacity = 0; 
 //当动画超过
时将隐藏它。time_out = setTimeout（function（）{menu.style.visibility = hidden;}，1000）; 
} 
  

JS小提琴演示

Can I make a certain element fade in when I hover over another one, and make it fade out when my mouse isn't on the element anymore?

I tried adding a transition in the CSS, but that doesn't seem to work (which I already predicted, because it's in fact the JavaScript that makes the div visible using DOM...).

I got the fiddle over here

解决方案

At first, I thought about soktinpk's solution. Opacity can be animated with css so it's the best bet.

However, it takes up the space even when it is not shown. To prevent that, you could make it position:absolute. But even then, elements behind it will not be clickable.

Here is a more robust solution with a combination of @soktinpk's ideas

To prevent that, hide it with display:none when it is not visible.

Edit

Actually, visibility:hidden seems to work better when fading back in.

HTML

<div id="button" onmouseover="showMenu()" onmouseout="hideMenu()">
    <!-- placing it inside will allow it to be positioned as wanted -->
    <div id="menu"></div>
</div>

CSS

#button {
    background-color: rgb(0,0,100);
    width: 100px;
    height: 50px;
    margin-top: 50px;
    margin-left: 50px;
    position:relative; // All absolutely positioned elements inside are relative to this element
}

#menu {
    background-color: rgb(0,100,0);
    width: 200px;
    height: 100px;
    opacity:0;
    visibility:hidden;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    position:absolute; // So that it displays at the right position
    top:100%;
    left:0;
}

JS

var time_out;
var menu = document.getElementById("menu");

function showMenu() {
    clearTimeout(time_out);
    menu.style.visibility = "visible";
    menu.style.opacity = 1;
}

function hideMenu() {
    clearTimeout(time_out);
    menu.style.opacity = 0;
    // This will hide it when the animation is over
    time_out = setTimeout(function(){menu.style.visibility = "hidden";},1000);
}

JS Fiddle Demo

这篇关于使用display属性进行JavaScript过渡吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！