我的应用程序执行不好与jQuery的slideDown和slideUp。我想在支持它的浏览器中使用CSS3等效。
是否可以使用CSS3过渡来更改display：none;显示：block;同时向下或向上滑动项目？
解决方法
你可以这样做：
#youritem .fade.in {
-webkit-animation-name: fadeIn;
}
#youritem .fade.out {
-webkit-animation-name: fadeOut;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(startYposition);
}
100% {
opacity: 1;
-webkit-transform: translateY(endYposition);
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
-webkit-transform: translateY(startYposition);
}
100% {
opacity: 0;
-webkit-transform: translateY(endYposition);
}
}
示例 – 滑动和淡化：
这幻灯片和动画的不透明度 – 不基于容器的高度，但在顶部/坐标。
View example
示例 – 自动高度/无Javascript：这是一个实时样本，不需要高度 – 处理自动高度，没有javascript。
View example
