我的 flex-grow 动画不能正常工作有什么问题吗？

【问题标题】：Is there any problem with my flex-grow animation not working properly?我的 flex-grow 动画不能正常工作有什么问题吗？
【发布时间】：2019-08-15 18:09:03
【问题描述】：

我创建的 div 一次只有一个活动的 flex。它似乎在 1200 像素的正文中运行良好，但由于过渡时内部隐藏/显示（类内容），它的开始闪烁小于 1200 像素。

如果我不会从 flex 更改内容类 display none 它运行良好；但我需要切换显示弹性。

请参阅下面的codepen 和 sn-p：

$('.top div').click(function(){
  $('.top div').removeClass('active')
  $(this).addClass('active')
})
body {
  background-color: #fff;
}

.top {
  display: flex;
}
.top .item {
  display: flex;
  border: 1px solid black;
  padding: 10px;
  flex-grow: 1;
  flex-basis: 0;
  height: 180px;
  transition: all .5s;
}
.top .item .flexo-box {
  display: flex;
  flex-basis: 0;
  background: #f8f8f8;
  box-sizing: border-box;
  position: relative;
}
.top .item .flexo-box img {
  width: 100%;
  max-width: 180px;
}
.top .item .view-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  background: #eeeeee;
}
.top > div:not(:last-child) {
  margin-right: 20px;
}
.top .active {
  background-color: white;
  flex-grow: 4;
  flex-basis: 0;
  opacity: 1;
}

.content {
  display: none;
  box-sizing: border-box;
  height: 100%;
}
.content .active-tab {
  height: 50px;
}
.content .active-tab p, .content .archive-tab p {
  font-size: 12px;
  margin: 0;
}
.content .active-tab p.active, .content .archive-tab p.active {
  background: blue;
}
.content .active-tab p.active + span, .content .archive-tab p.active + span {
  background: blue;
}
.content .active-tab span, .content .archive-tab span {
  font-size: 10px;
}

.item.active .flexo-box:hover .view-btn {
  opacity: 1;
}
.item.active .content {
  display: flex;
  flex-grow: 2;
}

.item > div {
  flex-grow: 1;
  flex-basis: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  <div class="item">
    <div class='flexo-box'>
      <img src="https://picsum.photos/200/300">
      <span class="view-btn">
      <a href="/jobs/12526/proof_documents/19776" class="btn btn-secondary proof__order__link ">
          View File
      </a>
  </span>
    </div>
      <div class='content'>
        <div class="active-tab">
        <p>dfgsfgsfg<p>
        
        <p class="active">012620_11254_LEN_78441.pdf</p>
        <span>fsdfgfs0<span>
        <div class="archive-tab">
          <h3>Archived file</h3>
          <p>012620_87896_LEN_11548.pdf</p>
          <span> archived dfgfd4<span>
           <p>012620_16975_LEN_98761.pdf<p>
           <span>archived sdfgsfg</span>
        </div>
      </div>
   </div>
          </div>
  
  <div class="item">
    <div class='flexo-box'>
      <img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
    </div>
      <div class='content'>
        hello
      </div>
  </div>
  
  <div class='item active'>
    <div class='flexo-box'></div>
      <div class='content'>
        hello
      </div>
  </div>
  
  <div  class="item">
    <div class='flexo-box'></div>
      <div class='content'>
        hello
      </div>
  </div>
  
  <div  class="item">
    <div class='flexo-box'>
            <img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
    </div>
      <div class='content'>

        
        <div class="active-tab">
        <p>current file<p>
        
        <p class="active">012620_11254_LEN_78441.pdf</p>
        <span>wertrwet 190314 1250<span>
        <div class="archive-tab">
          <h3>Archived file</h3>
          <p>012620_87896_LEN_11548.pdf</p>
          <span> wert ertrwet4<span>
           <p>012620_16975_LEN_98761.pdf<p>
           <span> 190309 1ertret152</span>
        </div>
      </div>
   </div>
        
        
      </div>
   </div>
</div>

【问题讨论】：

  • codepen 链接codepen.io/dhoni/pen/vPvKNx
  • 投反对票有什么理由吗？
  • 欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
  • @selva 总是在问题中添加一个 sn-p，即使您有外部链接 - 请参阅已编辑的问题...请按照您现在知道的准则进行操作

标签： html css flexbox


【解决方案1】：

display 属性无法设置动画 - 所以从 content 中删除 display: none 并添加这些：

.item>.content { 
  min-width: 0;
  flex: 0;
  overflow: hidden;
}

现在content 将是零宽度，flexo-box 将占据所有空间。注意 min-width: 0 的使用 - 这允许 flex 项目 shrink 超出其内容（flex 项目 的默认 min-width 是 @ 987654329@)。

现在您也可以将min-width: 0 添加到item 以获得更流畅的动画 - 请参阅下面的演示：

$('.top div').click(function() {
  $('.top div').removeClass('active')
  $(this).addClass('active')
})
body {
  background-color: #fff;
}

.top {
  display: flex;
}

.top .item {
  display: flex;
  border: 1px solid black;
  padding: 10px;
  flex-grow: 1;
  flex-basis: 0;
  height: 180px;
  transition: all .5s;
  min-width: 0; /* added */
}

.top .item .flexo-box {
  display: flex;
  flex-basis: 0;
  background: #f8f8f8;
  box-sizing: border-box;
  position: relative;
}

.top .item .flexo-box img {
  width: 100%;
  max-width: 180px;
}

.top .item .view-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  background: #eeeeee;
}

.top>div:not(:last-child) {
  margin-right: 20px;
}

.top .active {
  background-color: white;
  flex-grow: 4;
  flex-basis: 0;
  opacity: 1;
}

.content {
  /*display: none;*/
  box-sizing: border-box;
  height: 100%;
}

.content .active-tab {
  height: 50px;
}

.content .active-tab p,
.content .archive-tab p {
  font-size: 12px;
  margin: 0;
}

.content .active-tab p.active,
.content .archive-tab p.active {
  background: blue;
}

.content .active-tab p.active+span,
.content .archive-tab p.active+span {
  background: blue;
}

.content .active-tab span,
.content .archive-tab span {
  font-size: 10px;
}

.item.active .flexo-box:hover .view-btn {
  opacity: 1;
}

.item.active .content {
  display: flex;
  flex-grow: 2;
}

.item>div {
  flex-grow: 1;
  flex-basis: 0;
}

.item>.content { /* added */
  min-width: 0; /* allow it to go to zero */
  flex: 0; /* reduce the width */
  overflow: hidden; /* hide oveflow */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  <div class="item">
    <div class='flexo-box'>
      <img src="https://picsum.photos/200/300">
      <span class="view-btn">
      <a href="/jobs/12526/proof_documents/19776" class="btn btn-secondary proof__order__link ">
          View File
      </a>
  </span>
    </div>
    <div class='content'>
      <div class="active-tab">
        <p>dfgsfgsfg</p>
        <p class="active">012620_11254_LEN_78441.pdf</p>
        <span>fsdfgfs0</span>
        <div class="archive-tab">
          <h3>Archived file</h3>
          <p>012620_87896_LEN_11548.pdf</p>
          <span> archived dfgfd4</span>
          <p>012620_16975_LEN_98761.pdf</p>
          <span>archived sdfgsfg</span>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class='flexo-box'>
      <img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
    </div>
    <div class='content'>
      hello
    </div>
  </div>

  <div class='item active'>
    <div class='flexo-box'></div>
    <div class='content'>
      hello
    </div>
  </div>

  <div class="item">
    <div class='flexo-box'></div>
    <div class='content'>
      hello
    </div>
  </div>
  <div class="item">
    <div class='flexo-box'>
      <img src="https://picsum.photos/200/300" alt="" onerror="this.src = 'http://10.0.0.73:3000/assets/placeholder-6c8626f646674836d73093c5cd6377a4b8a05f672e0f14147692482e930d9bba.jpg'">
    </div>
    <div class='content'>
      <div class="active-tab">
        <p>current file</p>
        <p class="active">012620_11254_LEN_78441.pdf</p>
        <span>wertrwet 190314 1250</span>
        <div class="archive-tab">
          <h3>Archived file</h3>
          <p>012620_87896_LEN_11548.pdf</p>
          <span> wert ertrwet4</span>
          <p>012620_16975_LEN_98761.pdf</p>
          <span> 190309 1ertret152</span>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2021-01-24
    • 1970-01-01
    • 2021-12-06
    • 2021-06-11
    • 2018-02-02
    • 1970-01-01
    • 2023-03-25
    • 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