将内容滑出/滑入屏幕时的嵌套 CSS 过渡问题答案

【问题标题】：Nested CSS transitions issue when sliding content off/onto screen将内容滑出/滑入屏幕时的嵌套 CSS 过渡问题
【发布时间】：2020-06-04 18:55:38
【问题描述】：

我有一个 2 列布局，我想要实现的效果是当单击切换按钮时，左侧（窄）列在屏幕上显示动画。然后剩余的列扩展以填充剩余空间。

再次单击切换将实质上反转动画。随着内容恢复到原来的大小，然后另一列滑回以填充它留下的空间。

我的工作本质上是这样的，但是转换导致了一些问题。当我在窄列中添加transition-delay 时，这会影响其中的孩子。这是一个 CodePen：

https://codepen.io/moy/pen/zROvWN

我注意到的另一个问题是滚动条出现在浏览器窗口上，即使有足够的空间。我猜这是因为它认为窄列中的内容已经被压扁，现在真的很高了。有什么想法可以避免这种情况并解决我遇到的问题吗？

编辑

还可能值得注意的是，我在窄列中有一个包装 div 的原因是 .grid__item 元素上的填充在设置过渡时导致了问题。这就是为什么我在该列上没有转换时间，但它应用于其中的 .filters div。

【问题讨论】：

您只是希望这两个过渡同时开始？只要左边部分的宽度为 0，那么右边部分应该是 100%，平滑过渡？对吗？

标签： jquery html css css-transitions

【解决方案1】：

我把时间从0.4s增加到1s，这样你就可以轻松看到想要的结果了，

如果我误解了您的要求，请随意讨论，正如我上面评论的，您在这里需要做的就是在两个元素上应用相同的持续时间，不需要延迟。

$(document).ready(function(){
	$(".filter-toggle").click(function(){
	    $(".grid").toggleClass("hide-filters");
	});
});

/* #MIXINS */
/* Body */
body {
  margin: 0 auto;
  padding: 30px 0 0;
  max-width: 1200px;
}

/* #GRID */
.grid {
  margin-left: -30px;
  display: -webkit-box;
  display: flex;
  overflow: hidden;
}
.grid:before, .grid:after {
  content: "";
  display: table;
}
.grid:after {
  clear: both;
}

.grid__item {
  box-sizing: border-box;
  padding-left: 30px;
  width: 100%;
}

.one-half,
.two-quarters {
  width: 50%;
}

.one-third {
  width: 33.333%;
}

.two-thirds {
  width: 66.666%;
}

.one-quarter {
  width: 25%;
}

.three-quarters {
  width: 75%;
}

/* #THE PROBLEM */
.filter-controls {
  margin-bottom: 30px;
}
.filter-controls .filter-toggle {
  background: red;
  display: inline-block;
  padding: 20px;
}

.filter-grid .filter-grid__filters {
  -webkit-transition: all 1s;
  transition: all 1s;
}
.filter-grid .filters {
  -webkit-transition: all 10s;
  transition: all 1s;
}
.filter-grid .filter-grid__content {
  -webkit-transition: width .40s;
  transition: width 1s;
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

.hide-filters .filter-grid__filters {
  padding-left: 0;
  width: 0;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.hide-filters .filter-grid__content {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="filter-controls">
    <span class="btn filter-toggle">Toggle</span>
  </div>

  <div class="grid filter-grid">

    <div class="grid__item one-quarter filter-grid__filters">

      <div class="filters">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div>

    <div class="grid__item three-quarters filter-grid__content">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
</body>

【讨论】：

你有没有注意到这个问题已经超过 2 年了？并且发布问题的用户在过去 3 个月内没有登录
嘿@vals，我真的没看到，它只是在主页上的热门问题中弹出，我回答了。