如何使用CSS 3过渡获得与jQuery的slideToggle相同的效果？
我想要jQuery slideToggle效果，但想要使用CSS3过渡以便在iOS设备上调用GPU，以便过渡更顺畅。
您可以通过转换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; }
Toggle this div
抱歉，除非您知道确切的高度，否则CSS3不支持此function。 无法在0和auto之间进行动画处理。 如果您确切知道确切的高度，可以在此处生成一些转换代码： http ： //css3generator.com/
确实，您无法在0和自动高度之间设置动画，但实际上您可以切换最大高度。
在max-height:0和max-height:1000px之间切换（通过JS）你会得到实现的结果，虽然它不会像jQuery的slideToggle函数那样顺利。
加上不透明的褪色，它看起来很不错。 我强烈建议只在相对较短的容器上使用这种技术，因为大的容器可以创建一个生涩的动画。
.container { overflow-y: hidden; max-height: 0; transition: max-height 0.5s ease; } .container.open { max-height: 1000px; /* approx */ }
我相信Animatable应该可以做到。 这是一个CSS Transitions框架，虽然我没有进行iOS开发，但Lea Verou提到她在FF和Chrome for iOS上测试它。
还有其他CSS动画库，比如使用CSS过渡和javascript的move.js。