CSS 转换和 JS 同时切换

Question

我在 mouseover/mouseout(http://jsfiddle.net/4bytz20h/2/):

上没有显示带有 JS 切换性能的块

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 transitions）（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 逻辑（鼠标悬停时显示形式 'none' 到 'block'）和 CCS 转换效果（鼠标悬停时从 '0' 到 'auto' 的高度和宽度）。这里不是很好代码(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>

CSS 转换和 JS 同时切换

CSS transiction and JS toggle at the same moment

javascript

css

animation

transactions