当内容滑出屏幕时,嵌套的CSS过渡问题。

问题描述 投票:1回答:1

我有一个2列的布局,我想实现的效果是当一个切换按钮被点击时,左边(窄)的列会从屏幕上跳出来。然后剩下的一列就会展开来填充剩余的空间。

再次点击toggle按钮将基本上逆转动画。随着内容返回到原来的大小,然后另一列滑回填充它留下的空间。

我有这个工作的本质,但过渡造成了一些问题。因为我已经添加了 transition-delay 到窄列上,这会影响其中的子列。这里有一个CodePen。

https:/codepen. iomoypenzROvWN。

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

编辑

值得注意的是,我在窄列中使用包装div的原因是在 .grid__item 元素在设置过渡时引起了一个问题。这就是为什么我没有在该列上设置过渡时间,但却应用到了 .filters 内的div。

jquery html css css-transitions
1个回答
0
投票

我增加了时间从0.4s到1s,这样你就可以看到所需的结果eaisly。

如果我误解了你的要求,欢迎讨论,正如我上面所评论的,你需要做的是在两个元素上应用相同的时间持续,不需要延迟。

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.