CSS过渡和JS同时切换

Question

我在鼠标悬停/鼠标悬停时没有显示带有 JS 切换性能的块（http://jsfiddle.net/4bytz20h/2/）：

html:

<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
    <a>hover me</a>
    <div id="list">
        Some Text
    </div>
</div>

js:

function toggle_extra_panel() {
    var  sys_val = document.getElementById('list');
    sys_val.style.display = (sys_val.style.display == 'none' || 
                             sys_val.style.display == '') ? 'block' : 'none';

}

css:

#menu #list {
     display: none;
}

---

尝试添加一些动画效果（通过 CSS 转换）(http://jsfiddle.net/4bytz20h/1/)：

html（无改动）：

<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
    <a>hover me</a>
    <div id="list">
        Some Text
    </div>
</div>

JS：

<!-- empty here -->

CSS：

#menu #list {
    height: 0;
    width: 0;
    transition: all 1.5s ease-out;
    background: #d5d5d5;
}

#menu:hover #list {
    height: 250px;
    width: 250px;
    transition: all 2.5s ease-in;
}

---

但是我丢失了（忘记使用）我的 JS 切换代码。在下一个示例中，我尝试将 JS 逻辑（鼠标悬停时显示形式“无”到“阻止”）和 CCS 转换效果（鼠标悬停时从“0”到“自动”的高度和宽度）结合起来。这里代码不太好(http://jsfiddle.net/4bytz20h/)：

html（无改动）：

<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
    <a>hover me</a>
    <div id="list">
        Some Text
    </div>
</div>

js（无改动）：

function toggle_extra_panel() {
    var  sys_val = document.getElementById('list');
    sys_val.style.display = (sys_val.style.display == 'none' || 
                             sys_val.style.display == '') ? 'block' : 'none';

}

css:

#menu #list {
    height: 0;
    width: 0;
    transition: height 1.5s ease-out;
    transition: width 1.5s ease-out;
    background: #d5d5d5;
     display: none;
}

#menu:hover #list {
    height: 250px;
    width: 250px;
    transition: height 2.5s ease-in;
    transition: width 2.5s ease-in;
}

仅使用 ccs 转换来执行所有愿望的更好方法。 但是这种组合方式怎么样：在某一时刻 JS 使项目被显示，同时 ccs 尝试将矩形文本区域从 0 绘制到更大的 gbarite

Answer 1

我认为这可能是你想要做的。

.hide {
  height: 0px;
  width: 0px;
  transition: all 2.5s ease-in;
  background: #d5d5d5;
  opacity: 0;
}
.current:hover .hide {
  height: 250px;
  width: 250px;
  opacity: 1;
}

<div class="current">HOVER ME
  <div class="hide">SOME TEXT</div>
</div>