javascript 使 Div 平滑扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13094141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Div Expand Smoothly
提问by Morgan Green
I'm using Javascript to expand a div, but when the content is expanded it's highly abrupt and at best highly unattracive. I was wondering if there was a way to make this div expand slower and more of a visual expand then a BLAM. Now I'm done.
我正在使用 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">
采纳答案by Steve's a D
Theres really no point in re-inventing the wheel. You can do this pretty easily with Jquery's slidetoggle. Here is the page: http://api.jquery.com/slideToggle/
重新发明轮子真的没有意义。您可以使用 Jquery 的 Slidetoggle 轻松完成此操作。这是页面：http: //api.jquery.com/slideToggle/
回答by Jim
The trick is with appending and removing classes in Javascript... And attaching a CSS3 transition like this:
诀窍是在 Javascript 中附加和删除类......并附加这样的 CSS3 过渡：
div {
-webkit-transition: height .25s ease;
-moz-transition: height .25s ease;
transition: height .25s ease;
}
This applies a transition you can control the speed of to all your divs. Of course you can select which DOM elements to apply it to yourself.
这应用了一个过渡，您可以控制所有 div 的速度。当然，您可以选择将哪些 DOM 元素应用于自己。
And then the two jquery functions I'd use are
然后我使用的两个 jquery 函数是
$("#object").addClass("removeThis"); //hide
$("#object").removeClass("removeThis"); //show
But as pointed out you may not use jQuery! So here!
但正如所指出的，您可能不会使用 jQuery！所以在这里！
document.getElementById("object").className = "";
document.getElementById("object").className = "removeThis";
Where "#object" is the object you are targeting, and ".removeThis" is the class you are adding and removing from the class attribute in the dom tag. Heres what it looks like in css.
其中“#object”是您要定位的对象，而“.removeThis”是您要从 dom 标记的 class 属性中添加和删除的类。这是它在 css 中的样子。
#object {
height: 200px;
/* ignoring other CSS */
}
.removeThis {
height: 0;
}
Assuming that you want it to slide up and down. Another trick is to use opacity, or display: none and display: block. But play around. I hope this helps!
假设您希望它上下滑动。另一个技巧是使用 opacity 或 display: none 和 display: block。不过随便玩玩。我希望这有帮助！
Edit since 2012: Since you're using using JavaScript you're asking for work to be done on the main thread, you can utilize the compositor thread by animating on a transform instead. That is if you can figure out how to get away from animating the height style property.
2012 年以来的编辑：由于您使用的是 JavaScript，因此您要求在主线程上完成工作，您可以通过在转换上设置动画来利用合成器线程。也就是说，如果您能弄清楚如何摆脱高度样式属性的动画。
回答by Kaushik
I think the best trick is to use the CSS overflow:hiddenproperty in the division. This will hide the content which is out of the div height or width. Then you can easily increase and decrease the height of the division with smooth CSS transition.
我认为最好的技巧是overflow:hidden在除法中使用 CSS属性。这将隐藏超出 div 高度或宽度的内容。然后，您可以通过平滑的 CSS 过渡轻松地增加和减少分区的高度。
You can read the tutorial here
