Question

当我们扩展过渡是顺利的但是当我们崩溃过渡并不好...当它即将崩溃时我看到了摇晃。

我玩过渡但是没有用。你能帮助我提供我的代码吗？

.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;
}

Answer 1

您可以转换max-height而不是height，并在您要转换的元素内部使用填充等封装正文内容（在.body-inner中添加.body ）。我还为scale()添加了一个过渡，因为它会导致更多的＆＃34;手风琴＆＃34;风格崩溃，但你可以尝试没有它。

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

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

Answer 2

将初始div背景颜色设为绿色。当手风琴关闭时，它没有任何背景，所以它看起来好像div正在闪烁。

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

Answer 3

您可以做以下几件事：首先，accelerate some device's hardware使用-webkit-transform: translate3d(0,0,0);。其次，使用CSS动画属性transition timing function。我不确定你想要达到的效果，但你已经轻松了解了＃34;在某些元素上。尝试尝试＆＃34;缓解＆＃34;。第三，你正在使用的CSS转换可能与你的元素没有完全对齐，所以当转换完成运行时，div会快速回到它的位置。此问题的快速补丁可能是animation-fill-mode: forwards;。你的小提琴没有动画的实际@keyframes，所以很难给你任何进一步的建议。

当我们崩溃过渡不好

3 个答案: