Question

我没有在鼠标悬停/鼠标移除（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转录）（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>

CSS转换和JS在同一时刻切换

1 个答案: