使用display属性进行javascript转换？

Question

昨天我问了一个关于同一小提琴的问题。现在我开始工作，我想问别的东西，那就是：当我将鼠标悬停在另一个上时，我可以让某个div淡入淡出，当我的鼠标不再在div上时，它会淡出吗？

我尝试在CSS中添加transition，但这似乎不起作用（我已经预测过了，因为它实际上是javascript构成了div使用DOM可见......）。

我得到了here

的小提琴

Answer 1

这是一个主要是css的答案：http://jsfiddle.net/Z7GuR/4/

您应使用display，而不是使用none，因为它只有两种模式（在本例中为block和opacity）。这将使您顺利过渡。

的CSS：

#menu {
    background-color: rgb(0,100,0);
    width: 200px;
    height: 100px;
    margin-left: 50px;
    // Notice
    opacity: 0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

使用Javascript：

function showMenu() {
    document.getElementById("menu").style.opacity = 1;
}

function hideMenu() {
    document.getElementById("menu").style.opacity = 0;
    // If you want, you can bind an "end" event to css transition and
    // set "display" to none when that happens
}

正如一些人所指出的那样，即使将不透明度设置为0，该元素仍会占用空间。为了防止这种情况，您可以在动画结束后将display设置为none，正如我在示例中所说的那样（对不起，如果不清楚）。这比改变margin要好得多，这是一个“hacky”解决方案。

修改：好的，display: none可行，但出于某种原因，使用display: block时，如果淡入淡出，则动画会消失。以前（至少在铬中）。因此，我使用display: none和position: absolute的组合代替visibility: hidden来隐藏元素：

http://jsfiddle.net/Z7GuR/4/

var menu = document.getElementById("menu"), button = document.getElementById("button");

function showMenu() {
    menu.style.opacity = 1;
    // Reset visibility and position
    menu.style.visibility = "visible";
    menu.style.position = "static";
    menu.removeEventListener("transitionend", setDisplayNone, false);
}

function hideMenu() {
    menu.style.opacity = 0;
    // I prefer using transitionend to setTimeout
    // transitionend is more extendable, and it makes more sense to me
    menu.addEventListener("transitionend", setDisplayNone, false);
}

function setDisplayNone() {
    menu.style.visibility = "hidden";
    menu.style.position = "absolute";
}

button.addEventListener("mouseover", showMenu);
button.addEventListener("mouseout", hideMenu);

我的答案和接受的答案之间唯一的主要区别是文本将始终可见（淡入元素不会覆盖它）。

Answer 2

起初，我想到了soktinpk的解决方案。不透明度可以用css动画，所以它是最好的选择。

然而，即使没有显示，也会占用空间。为了防止这种情况，您可以将其设为position:absolute。但即使这样，它背后的元素也不会被点击。

这是一个更强大的解决方案，结合了@ soktinpk的想法

为防止这种情况发生，请在 display:none 中隐藏它。

修改

实际上，visibility:hidden似乎在淡入时更好。

<强> 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

Answer 3

这是针对您的特定HTML的纯css解决方案：

fiddle

HTML

<div id="button" onmouseover="showMenu()" onmouseout="hideMenu()"></div>
<div id="menu"></div>

对于css我使用了不透明度而不是显示并添加了以下内容：

CSS

#button:hover ~ #menu,
#menu:hover {
    opacity:1;
    height:100px;
}