添加 CSS3 过渡展开/折叠

Posted

技术标签:

【中文标题】添加 CSS3 过渡展开/折叠【英文标题】：Add CSS3 transition expand/collapse 【发布时间】：2012-07-15 21:17:22 【问题描述】：

如何添加展开/折叠过渡？

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>

http://jsfiddle.net/Bq6eK/1

【问题讨论】：

顺便说一句，显然直接为 height 属性设置动画很昂贵。而使用比例尺很复杂：developers.google.com/web/updates/2017/03/… 【参考方案1】：

This是我自动调整高度的解决方案：

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>

我使用了 r3bel 发布的解决方法：Can you use CSS3 to transition from height:0 to the variable height of content?

【讨论】：

.measuringWrap 是不必要的。你可以使用.growDiv的scrollHeight属性jsfiddle.net/9ccjE/293 这个转换是通过 JS 实现的，而不是问题中所要求的 CSS。 @IgorButs 提问者通常有权使用他们想要的任何实现。 我会在扩展时在 0.5 毫秒超时后移除高度，以确保 div 会在窗口或容器大小发生变化时调整大小。【参考方案2】：

this 应该可以工作，也得试一试.. :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>

【讨论】：

很好，但是如何避免在 javascript 中设置高度？ more 类中内容的长度会有所不同。 如 here 所写，这是不可能的 atm （因为你想要动画对吗？）除了 a expensive workaround described here 我再次编辑了您的 jsfiddle 并添加了动态高度的“解决方法”，但是每次下拉高度随 javascript 发生变化时，您都必须获取下拉列表的高度：jsfiddle。我不保证这适用于所有浏览器：D 这可能不是最好的解决方案，因为它没有响应。将 CSS 与 overflow: hidden 一起使用时，它会隐藏“隐藏”链接。【参考方案3】：

http://jsfiddle.net/Bq6eK/215/

我没有针对此解决方案修改您的代码，而是自己编写了代码。我的解决方案并不完全符合您的要求，但也许您可以利用现有知识在此基础上进行构建。我也对代码进行了注释，这样你就知道我对这些更改做了什么。

作为“避免在 JavaScript 中设置高度”的解决方案，我只是在名为 toggleHeight 的 JS 函数中设置了 'maxHeight' 参数。现在可以在 html 中为每个可扩展类的 div 设置它。

我先说一下，我对前端语言不是很有经验，而且有一个问题是我需要在动画开始之前先点击两次“显示/隐藏”按钮。我怀疑这是焦点问题。

我的解决方案的另一个问题是，您实际上可以通过单击 div 并向下拖动来确定隐藏的文本是什么，而无需按下显示/隐藏按钮，您可以突出显示不可见的文本并将其粘贴到一个可见的空间。

我对下一步的建议是让显示/隐藏按钮动态变化。我想你可以用你已经知道的关于用 JS 显示和隐藏文本的知识来弄清楚如何做到这一点。

【讨论】：

我做了两个小修改：jsfiddle.net/Bq6eK/215。 onclick="..." 应该返回 false，并且应该直接为元素设置高度，而不是在 CSS 中。否则必须点击两次才能打开该框，因为elem.style 只包含直接为元素设置的样式，而不包含有效样式。【参考方案4】：

天哪，我花了几个小时试图找到一个简单的解决方案。我知道代码很简单，但没有人提供我想要的东西。所以终于开始编写一些示例代码，并做了一些简单的事情，任何人都可以使用不需要 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">

【讨论】：

【参考方案5】：

这是一个根本不使用 JS 的解决方案。它改用checkboxes。

您可以通过将其添加到 CSS 中来隐藏复选框：

.container input
    display: none;

然后添加一些样式使它看起来像button。

Here's the source code that I modded.

【讨论】：

解决方案不根据文字量应用高度。在 CSS 中，您必须确定选中 div 的高度：.ac-container input:checked ~ article.ac-small height: 140px; 我需要一个根据内容应用高度的解决方案。

以上是关于添加 CSS3 过渡展开/折叠的主要内容，如果未能解决你的问题，请参考以下文章

layui侧边栏折叠和展开效果该怎么实现

菜单显示和折叠时平滑过渡

向 SharePoint (2013) 列表添加单独运行的展开/折叠按钮

我们如何快速在表格视图底部添加展开和折叠单元格

将动画添加到 ListView 以展开/折叠内容

Bootstrap Collapse Accordion - 默认展开/折叠？