javascript - CSS 过渡和 JS 同时切换

Question

我没有在鼠标悬停/鼠标移出时显示具有 JS 切换性能的 block (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 到更大的 gabarite

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>