我的应用程序在使用jQuery的slideDown和slideUp时表现不佳.我希望在支持CSS3的浏览器中使用它.
Is it possible, using CSS3 transitions, to change an element from display: none; to display: block; while sliding the item down or up?
我的应用程序在使用jQuery的slideDown和slideUp时表现不佳.我希望在支持CSS3的浏览器中使用它.
Is it possible, using CSS3 transitions, to change an element from display: none; to display: block; while sliding the item down or up?
你可以这样做:
#youritem .fade.in {
animation-name: fadeIn;
}
#youritem .fade.out {
animation-name: fadeOut;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(startYposition);
}
100% {
opacity: 1;
transform: translateY(endYposition);
}
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(startYposition);
}
100% {
opacity: 0;
transform: translateY(endYposition);
}
}
Example - Slide and Fade:个
这将对不透明度进行滑动并设置动画-不是基于容器的高度，而是基于顶部/坐标. View example个
Example - Auto-height/No Javascript: Here is a live sample, not needing height - dealing with automatic height and no javascript.
View example