CSS转换和JS同时切换

问题描述

我没有在mouseover / mouseout（ ）上显示具有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转换）（ ）：

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”到“自动”）。 这里没有写好代码（ ）：

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