Javascript 添加 CSS3 过渡展开/折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11514242/
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
Add CSS3 transition expand/collapse
提问by Felix
How do I add an expand/collapse transition?
如何添加展开/折叠过渡？
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}.more {
display: none;
padding-top: 10px;
}
a.showLink,
a.hideLink {
text-decoration: none;
-webkit-transition: 0.5s ease-out;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}Here is some text.
<div class="readmore">
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
<div id="example" class="more">
<div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>
</div>
</div>采纳答案by Felix
Thisis my solution that adjusts the height automatically:
这是我自动调整高度的解决方案：
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}#more-button {
border-style: none;
background: none;
font: 16px Serif;
color: blue;
margin: 0 0 10px 0;
}
#grow input:checked {
color: red;
}
#more-button:hover {
color: black;
}
#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
}<input type="button" onclick="growDiv()" value="Read more" id="more-button">
<div id='grow'>
<div class='measuringWrapper'>
<div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>I used the workaround that r3bel posted: Can you use CSS3 to transition from height:0 to the variable height of content?
我使用了 r3bel 发布的解决方法：Can you use CSS3 to transition from height:0 to the variable height of content?
回答by r3bel
thisshould work, had to try a while too.. :D
这应该有效，也必须尝试一段时间..：D
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID + '-hide').style.display = 'inline';
document.getElementById(shID).style.height = '100px';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID + '-hide').style.display = 'none';
document.getElementById(shID).style.height = '0px';
}
}
}#example {
background: red;
height: 0px;
overflow: hidden;
transition: height 2s;
-moz-transition: height 2s;
/* Firefox 4 */
-webkit-transition: height 2s;
/* Safari and Chrome */
-o-transition: height 2s;
/* Opera */
}
a.showLink,
a.hideLink {
text-decoration: none;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}Here is some text.
<div class="readmore">
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
<div id="example" class="more">
<div class="text">
Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<p>
<a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>
</p>
</div>
</div>回答by r3bel
http://jsfiddle.net/Bq6eK/215/
http://jsfiddle.net/Bq6eK/215/
I did not modify your code for this solution, I wrote my own instead. My solution isn't quite what you asked for, but maybe you could build on it with existing knowledge. I commented the code as well so you know what exactly I'm doing with the changes.
我没有为此解决方案修改您的代码，而是自己编写了代码。我的解决方案并不完全符合您的要求，但也许您可以利用现有知识构建它。我也对代码进行了注释，因此您知道我对这些更改做了什么。
As a solution to "avoid setting the height in JavaScript", I just made 'maxHeight' a parameter in the JS function called toggleHeight. Now it can be set in the HTML for each div of class expandable.
作为“避免在 JavaScript 中设置高度”的解决方案，我只是在名为 toggleHeight 的 JS 函数中将 'maxHeight' 作为参数。现在可以在 HTML 中为可扩展类的每个 div 设置它。
I'll say this up front, I'm not super experienced with front-end languages, and there's an issue where I need to click the 'Show/hide' button twice initially before the animation starts. I suspect it's an issue with focus.
我会预先说明这一点，我对前端语言的经验不是很丰富，而且有一个问题，我需要在动画开始之前最初单击“显示/隐藏”按钮两次。我怀疑这是一个焦点问题。
The other issue with my solution is that you can actually figure out what the hidden text is without pressing the show/hide button just by clicking in the div and dragging down, you can highlight the text that's not visible and paste it to a visible space.
我的解决方案的另一个问题是，您实际上可以找出隐藏的文本是什么，而无需按下显示/隐藏按钮，只需单击 div 并向下拖动，您就可以突出显示不可见的文本并将其粘贴到可见空间.
My suggestion for a next step on top of what I've done is to make it so that the show/hide button changes dynamically. I think you can figure out how to do that with what you already seem to know about showing and hiding text with JS.
我对我所做的下一步的建议是使显示/隐藏按钮动态更改。我想你可以用你已经知道的关于用 JS 显示和隐藏文本的知识来弄清楚如何做到这一点。
回答by Deathstalker
OMG, I tried to find a simple solution to this for hours. I knew the code was simple but no one provided me what I wanted. So finally got to work on some example code and made something simple that anyone can use no JQuery required. Simple javascript and css and html. In order for the animation to work you have to set the height and width or the animation wont work. Found that out the hard way.
天哪，我花了几个小时试图找到一个简单的解决方案。我知道代码很简单，但没有人提供我想要的东西。所以最后开始处理一些示例代码并制作一些简单的东西，任何人都可以使用不需要的 JQuery。简单的 javascript 和 css 和 html。为了使动画起作用，您必须设置高度和宽度，否则动画将不起作用。发现了困难的方式。
<script>
function dostuff() {
if (document.getElementById('MyBox').style.height == "0px") {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;");
}
else {
document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;");
}
}
</script>
<div id="MyBox" style="height: 0px; width: 0px;">
</div>
<input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
回答by Deathstalker
Here's a solution that doesn't use JS at all. It uses checkboxesinstead.
这是一个根本不使用JS的解决方案。它使用复选框代替。
You can hide the checkbox by adding this to your CSS:
您可以通过将其添加到 CSS 来隐藏复选框：
.container input{
display: none;
}
And then add some styling to make it look like a button.
然后添加一些样式，使其看起来像一个按钮。
