当我们崩溃时过渡不好答案

【问题标题】：when we collapse transition is not good当我们崩溃时过渡不好
【发布时间】：2017-09-29 05:18:41
【问题描述】：

当我们展开时过渡很平滑，但当我们折叠时过渡不好......当它即将折叠时我看到了震动。

我玩过过渡，但它不起作用。你能帮我在小提琴中提供我的代码吗？

.accordion-section {
    border-bottom: solid 1px #000;
}

.accordion-section > h3 {
    padding: 6px;
    font-size: 16px;
    background-color: #CCC;
    margin: 0;
}


.accordion-section > .body {
    height: 0;
    padding: 0 10px;
    overflow-y: hidden;
    transition: height .5s;
    transition: height .5s, padding-top .5s, padding-bottom .5s;
}

【问题讨论】：

不清楚您要做什么，什么是“不好”，什么是“不工作”。另请注意，我们希望在问题本身中看到minimal reproducible example，不仅在 JSFiddle 等第三方网站上。另见meta.stackexchange.com/q/168903/194720

标签： javascript html css reactjs redux

【解决方案1】：

您可以做几件事：首先，accelerate some device's hardware 使用 -webkit-transform: translate3d(0,0,0); 。其次，使用CSS动画属性transition timing function。我不确定您要达到哪种效果，但是您对某些元素有“轻松”。尝试尝试“缓出”。第三，您使用的 CSS 过渡可能无法与您的元素完美对齐，因此当过渡完成运行时，div 会快速返回其位置。这个问题的快速补丁可能是animation-fill-mode: forwards;。你的小提琴没有实际的动画@keyframes，所以很难给你任何进一步的建议。

【讨论】：

【解决方案2】：

您可以转换max-height 而不是height，并在您要转换的元素内使用填充等将正文内容括起来（在.body 中添加.body-inner）。我还为scale() 添加了一个过渡，因为它会导致更“手风琴”风格的崩溃，但您可以尝试不这样做。

与scale() - http://jsfiddle.net/b4L6kyg4/93/

没有 - http://jsfiddle.net/b4L6kyg4/94/

【讨论】：

它的工作，但是否有可能减少这个额外的 div
并非如此，即使设置了overflow: hidden，该元素中的填充会溢出，导致它具有布局并出现在页面上。因此，当该元素在 .body-inner 元素内可见时，您需要将所有填充和边距以及所需的东西放在该元素上，然后在父元素 (.body) 上转换并隐藏溢出。如果我与您坐下来讨论一些选项，我确信有办法做到这一点，但这可能是您现有代码最简单的方法。
当我单击第 1 节内容时打开，如果我移动到第 1 节内容的底部，然后单击第 1 节内容将关闭。但我看不到第 2 部分之后我看到第 3 部分，因为屏幕向上移动。如何在我们的屏幕中保留第 2 节。我使用了 window.scrollTo(0, 0) 但仍然没有指向第二个任何想法？？？ jsfiddle.net/b4L6kyg4/102

【解决方案3】：

只需将初始 div 背景颜色设为绿色即可。当手风琴关闭时，它没有任何背景，因此看起来好像 div 在闪烁。

.accordion-section > .body {
    background: green;
}

【讨论】：