CSS3 等效于 jQuery slideUp 和 slideDown? [英] CSS3 equivalent to jQuery slideUp and slideDown?

问题描述

我的应用程序在使用 jQuery 的 slideDown 和 slideUp 时表现不佳.我希望在支持 CSS3 的浏览器中使用等效的 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 转换将元素从 display: 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);
    }
}

示例 - 滑动和淡入淡出:

这会滑动并动画化不透明度 - 不是基于容器的高度，而是基于顶部/坐标.查看示例

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屋！