8

我正在使用 Javascript 来扩展 div，但是当内容被扩展时，它非常突然，充其量也非常不吸引人。我想知道是否有办法让这个 div 扩展得更慢，更多的是视觉扩展，然后是 BLAM。现在我完成了。 

<script language="javascript"> 
function toggle_profile() {
    var ele = document.getElementById("toggleProfile");
    var text = document.getElementById("displayProfile");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "View Profile";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Profile";
    }
} 
                        </script>

                      <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p>
                      <br />
                  <div id="toggleProfile" style="display: none">
4

3 回答 3

18

诀窍是在 Javascript 中添加和删除类...并像这样附加 CSS3 过渡：

div {
    -webkit-transition: height .25s ease;
       -moz-transition: height .25s ease;
            transition: height .25s ease;
}

这会将您可以控制速度的过渡应用到所有 div。当然，您可以选择将其应用于自己的 DOM 元素。

然后我要使用的两个 jquery 函数是

$("#object").addClass("removeThis"); //hide
$("#object").removeClass("removeThis"); //show

但正如指出的那样，您可能不会使用 jQuery！所以在这里！

document.getElementById("object").className = "";
document.getElementById("object").className = "removeThis";

其中“#object”是您要定位的对象，“.removeThis”是您在 dom 标记中的 class 属性中添加和删除的类。这是它在 css 中的样子。

#object {
    height: 200px;
    /* ignoring other CSS */
}

.removeThis {
    height: 0;
}

假设您希望它上下滑动。另一个技巧是使用不透明度，或 display: none 和 display: block。而是随便玩。我希望这有帮助！

自 2012 年以来编辑：由于您使用的是 JavaScript，因此您要求在主线程上完成工作，您可以通过在变换上制作动画来利用合成器线程。也就是说，如果您可以弄清楚如何摆脱对高度样式属性的动画处理。

于 2012-10-26T20:46:18.263 回答
3

重新发明轮子真的没有意义。您可以使用 Jquery 的滑动切换非常轻松地做到这一点。这是页面：http ://api.jquery.com/slideToggle/

于 2012-10-26T20:44:49.460 回答
1

overflow:hidden我认为最好的技巧是在除法中使用 CSS属性。这将隐藏超出 div 高度或宽度的内容。然后，您可以通过平滑的 CSS 过渡轻松增加和减少分割的高度。

你可以在这里阅读教程

于 2013-10-24T17:10:30.797 回答