html - 在过渡期间,我如何阻止动画内容与其他立即卡入到位的元素重叠?

标签 html css

解释

我发现这个问题有点难以表达,但了解我在说什么的最简单方法是查看我制作的 CodePen。

https://codepen.io/anon/pen/gxqXzL

如您所见,动画的文本内容与下面的 div 短暂重叠,后者立即移动到新位置。有什么办法可以避免这种情况吗?

CSS

p{
  width:400px;
}

hr{
  width:400px;
  margin-left:0px;
}

.section{
  width:400px;

  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transform: scaleY(1);
  transform-origin: top;

  &.closed{
    transform: scaleY(0);
    height: 0;
  }
}

HTML

<button onclick="toggle()">Toggle</button>
<hr/>
<p>Text</p>
<hr/>
<div id="section" class="section">
  <p>Lorem ipsum....</p>
</div>
<hr/>
<p>Text</p>
<hr/>
<div class="section">
  <p>Lorem ipsum...</p>
</div>

最佳答案

如果你有固定的文本 block 高度,你可以将它从 Xpx 设置为 0px,如果你不知道文本的高度,你可以做一个max-height:

技巧

示例 max-height: 1000px 动画到 max-height: 0;

不同文本 block 之间的动画持续时间可能不一致,但您可以找到中间的东西,这几乎不会引起注意。

关于html - 在过渡期间,我如何阻止动画内容与其他立即卡入到位的元素重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46004054/

相关文章:

javascript - 单击第一个按钮后 HTML 输出未更新/计算

html - 内容在容器内,但背景和边框在容器外

jquery - 如何在悬停时更改不同元素的 css?

html - 跨页面的 Squarespace 拉伸(stretch)画廊

html - 以 CSS Transform 或 Flexbox 为中心,哪一个更受支持?

html - 从视口(viewport)中排除 div

javascript - 为什么我的 Bootstrap Carousel 无法缩放?

php - HTML 5 相机访问和使用 php 上传文件

html - MathJax 自动换行

css - 在上下文中将 CSS 变量相互关联