如何使用 CSS 3 转换获得与 jQuery 的 slideToggle 相同的效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8860631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get same effect as jQuery's slideToggle using CSS 3 transitions?
提问by sevens
I want the jQuery slideToggle effect but want to use CSS3 transitions in order to invoke the GPU on an iOS device so the transition is smoother.
我想要 jQuery slideToggle 效果，但想要使用 CSS3 转换来调用 iOS 设备上的 GPU，从而使转换更平滑。
回答by dfsq
You can achieve this by transitioning height, padding's and border-width. Here is an example:
您可以通过转换height,padding和来实现这一点border-width。下面是一个例子：
$('.run-css').click(function() {
$('.cont').toggleClass('toggled');
});.cont {
width: 100px;
height: 100px;
border: 1px #CCC solid;
background-color: #EEE;
padding: 5px;
-webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
}
.toggled {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
height: 0;
border-width: 0 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="run-css">CSS slideToggle</button>
<div class="cont">Toggle this div</div>回答by TelFiRE
Sorry but this is not supported by CSS3 unless you know the exact height. There is no way to animate between 0 and auto. If you do know the exact height, you can generate some transition codes here: http://css3generator.com/
抱歉，除非您知道确切的高度，否则 CSS3 不支持此功能。没有办法在 0 和 auto 之间设置动画。如果你知道确切的高度，你可以在这里生成一些过渡代码：http: //css3generator.com/
回答by Carson
True, you cannot animate between 0 and auto height, but you can actually toggle the max-height.
确实，您不能在 0 和自动高度之间设置动画，但您实际上可以切换最大高度。
Toggle (via JS) between max-height:0and max-height:1000pxand you'll get the achieved result, though it won't be quite as smooth as jQuery's slideToggle function.
在max-height:0和之间切换（通过 JS）max-height:1000px，您将获得所达到的结果，尽管它不会像 jQuery 的 slideToggle 函数那样流畅。
Couple it with an opacity fade and it looks pretty good. I strongly suggest only using this technique on relatively short containers though, as the large ones can create a jerky animation.
将它与不透明度淡入淡出相结合，看起来很不错。我强烈建议只在相对较短的容器上使用这种技术，因为较大的容器可以创建生涩的动画。
回答by John F
.container {
overflow-y: hidden;
max-height: 0;
transition: max-height 0.5s ease;
}
.container.open {
max-height: 1000px; /* approx */
}
回答by David Hobs
I believe Animatableshould do the trick. It's a CSS Transitions framework, and although I don't do iOS development, Lea Verou mentions that she test it on FF and Chrome for iOS.
我相信Animatable应该可以解决问题。这是一个 CSS Transitions 框架，虽然我不从事 iOS 开发，但 Lea Verou 提到她在 FF 和 Chrome for iOS 上对其进行了测试。
There's other CSS animation libraries, like move.jsthat use CSS transitions and javascript.
还有其他 CSS 动画库，例如使用 CSS 转换和 javascript 的move.js。
