CSS3相当于jQuery slideUp和slideDown? [英] CSS3 equivalent to jQuery slideUp and slideDown?
问题描述
我的应用程式使用jQuery的slideDown和slideUp效能不佳。我希望在支持它的浏览器中使用CSS3等效项。
My application is performing poorly with jQuery's slideDown and slideUp. I'm looking to use a CSS3 equivalent in browsers which support it.
使用CSS3转换可以从显示更改元素:none; 到
display:block;
向下或向上滑动项目?
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);
}
}
示例 - 滑动和淡化: strong>
Example - Slide and Fade:
这个幻灯片和动画不透明度 - 不是基于容器的高度,而是顶部/坐标。
查看示例
This slides and animates the opacity - not based on height of the container, but on the top/coordinate. View example
示例 - 自动高度/无Javascript:这是一个实时示例,不需要高度 - 处理自动高度而不使用javascript。
查看示例
Example - Auto-height/No Javascript: Here is a live sample, not needing height - dealing with automatic height and no javascript.
View example
这篇关于CSS3相当于jQuery slideUp和slideDown?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!