导致 ul 列中断的 CSS 过渡

【问题标题】：CSS transitions causing ul columns to break导致 ul 列中断的 CSS 过渡
【发布时间】：2019-12-04 12:16:12
【问题描述】：

我正在尝试为员工资料创建一个页面，其中显示图像名称和标题，然后单击箭头展开该员工的描述。

虽然我的 ul 设置为 2 列，但我的一切正常工作会导致一个问题，即扩展多个描述会缓慢地将该列中的底部 li 推到下一个。可能在下一列以半里结束。

像这样：

理想情况下会发生的情况是 ul 只会扩展其高度以考虑描述中的额外高度。但是，一旦开始重叠，就将整个 li 推到下一列也是可以接受的。

有什么方法可以实现吗？ JSFiddle

HTML：

<ul class="teams">
    <li>
        <div class="top">
            <div class="imageWrap">
                <img src="useruploads/user.png">
            </div>

            <div class="details">
                <h2>Employee Name</h2>
                <h4>Title</h4>
            </div>

            <div class="expander"><span><</span></div>
        </div>

        <div class="bottom">
            <p>Description</p>
        </div>
    </li>
</ul>

CSS：

.teams {
margin: 1em auto;
padding: 0;
list-style: none;
columns: 2;
max-width: 1024px;
}

.teams li {
padding: 1em;
box-sizing: border-box;
margin-bottom: 1em;
}

.teams li .top {
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 150px;
overflow: hidden;
}

.teams li .imageWrap {
width: 150px;
height: 150px;
background: #f3f3f3;
border-radius: 100%;
position: relative;
overflow: hidden;
}

.teams li .imageWrap img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: auto;
margin-top: 1em;
box-sizing: border-box;
object-fit: cover;
break-inside: avoid-column;
}

.teams li .imageWrap:before {
content: "";
display: block;
padding-top: 100%;
}

.teams li .details {
margin-left: 1em;
width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
margin: 0;
color: #5A96D3;
}

.teams li .bottom {
margin-top: 1em;
opacity: 0;
overflow: hidden;
max-height: 0;
background: #f3f3f3;
transition: max-height 1.5s ease;
}

.teams li .bottom p {
margin: 0;
padding: 1em;
box-szing: border-box;
}

.teams li .bottom#expanded {
opacity: 1;
overflow: hidden;
max-height: 100px;
transition: max-height 1.5s ease;
}

.teams li .expander {
border-radius: 100%;
background: #f3f3f3;
height: 35px;
width: 35px;
padding: 0.5em;
box-sizing: border-box;
margin-left: auto;
margin-right: 0;
cursor: pointer;
}

.teams li .expander span {
text-align: center;
display: block;
user-select: none;
transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
transform: rotate(0deg);
}

.teams li .expander#open > span {
transform: rotate(-90deg);
}

【问题讨论】：

    标签： css transition


    【解决方案1】：

    您可以重置 display 和 width 以避免 li 框分成 2 列：

    示例：

    $(".expander").click(function() {
  if($(this).attr("id") == "open") {
    $(this).attr("id", "closed");
    $(this).closest("li").find(".bottom").attr("id", "");
  }
  else {
    $(this).attr("id", "open");
    $(this).closest("li").find(".bottom").attr("id", "expanded");
  }
});
    body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;  
    display:inline-block;
    width:100%;
}

.teams li .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 150px;
    overflow: hidden;
}

.teams li .imageWrap {
    width: 150px;
    height: 150px;
    background: #f3f3f3;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.teams li .imageWrap img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    object-fit: cover;
    break-inside: avoid-column;
}

.teams li .imageWrap:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.teams li .details {
    margin-left: 1em;
    width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
    margin: 0;
    color: #5A96D3;
}

.teams li .bottom {
    margin-top: 1em;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    background: #f3f3f3;
    transition: max-height 1.5s ease;
}

.teams li .bottom p {
    margin: 0;
    padding: 1em;
    box-szing: border-box;
}

.teams li .bottom#expanded {
    opacity: 1;
    overflow: hidden;
    max-height: 100px;
    transition: max-height 1.5s ease;
}

.teams li .expander {
    border-radius: 100%;
    background: #f3f3f3;
    height: 35px;
    width: 35px;
    padding: 0.5em;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

.teams li .expander span {
    text-align: center;
    display: block;
    user-select: none;
    transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
    transform: rotate(0deg);
}

.teams li .expander#open > span {
    transform: rotate(-90deg);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="teams">
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
</ul>

    你也可以试试break-inside:avoid;https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

    $(".expander").click(function() {
  if($(this).attr("id") == "open") {
    $(this).attr("id", "closed");
    $(this).closest("li").find(".bottom").attr("id", "");
  }
  else {
    $(this).attr("id", "open");
    $(this).closest("li").find(".bottom").attr("id", "expanded");
  }
});
    body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    break-inside: avoid;/* here */
}

.teams li .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 150px;
    overflow: hidden;
}

.teams li .imageWrap {
    width: 150px;
    height: 150px;
    background: #f3f3f3;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.teams li .imageWrap img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    object-fit: cover;
    break-inside: avoid-column;
}

.teams li .imageWrap:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.teams li .details {
    margin-left: 1em;
    width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
    margin: 0;
    color: #5A96D3;
}

.teams li .bottom {
    margin-top: 1em;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    background: #f3f3f3;
    transition: max-height 1.5s ease;
}

.teams li .bottom p {
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
}

.teams li .bottom#expanded {
    opacity: 1;
    overflow: hidden;
    max-height: 100px;
    transition: max-height 1.5s ease;
}

.teams li .expander {
    border-radius: 100%;
    background: #f3f3f3;
    height: 35px;
    width: 35px;
    padding: 0.5em;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

.teams li .expander span {
    text-align: center;
    display: block;
    user-select: none;
    transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
    transform: rotate(0deg);
}

.teams li .expander#open > span {
    transform: rotate(-90deg);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="teams">
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
</ul>

    【讨论】：

      【解决方案2】：

      我使用flex 来解决这个更好的方法更新下面的CSS

      .teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    flex: 1;
}

      如果你知道描述行，你可以在.teams li 上设置min-height

      【讨论】：

      • 虽然这很好用，但我不希望我扩展描述的那个 li 也调整它的高度，就像这个例子一样。我更喜欢只影响一列，就像接受的答案一样。但我认为两者都很好，具体取决于您希望事情的表现。谢谢！
      • 谢谢@EdwardHall，我认为您的卡片可以作为行，这就是我这样做的原因，但无论如何 G-Cyr 解决方案是您想要的列方式！为我的回答点赞！ :)
      【解决方案3】：

      如果你用 CSS 显示会怎样

           $(".expander").click(function() {
         if($(this).attr("id") == "open") {
           $(this).attr("id", "closed");
           $("#" + Title).css("display", "none");
            }
            else {
              $(this).attr("id", "open");
              $("#" + Title).css("display", "block");
             }

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2023-03-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-02-12
        • 2019-05-06
        • 2011-09-17
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode