CSS3相当于jQuery slideUp和slideDown？

我的应用程序执行不好与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

原文地址：https://www.jb51.cc/css/223512.html