CSS3是否等同于jQuery slideUp和slideDown？
CSS3是否等同于jQuery slideUp和slideDown？
提问于 2011-02-22 07:37:27
我的应用程序在使用jQuery的slideDown和slideUp时性能很差。我希望在支持它的浏览器中使用CSS3等效项。
在向下或向上滑动项目时，是否可以使用CSS3转换将元素从display: none;更改为display: block;？
回答 10
Stack Overflow用户
回答已采纳
发布于 2011-02-22 07:47:39
你可以这样做：
#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);
}
}示例-滑动和淡入淡出：
这将对不透明度进行滑动和动画处理-不是基于容器的高度，而是基于顶部/坐标。View example
示例-自动高度/没有Javascript:这里是一个实时示例，不需要高度-处理自动高度和没有javascript。
View example
Stack Overflow用户
发布于 2013-02-13 00:24:40
我更改了您的解决方案，以便它可以在所有现代浏览器中运行：
css代码片段：
-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;js代码片段：
var clone = $('#this').clone()
.css({'position':'absolute','visibility':'hidden','height':'auto'})
.addClass('slideClone')
.appendTo('body');
var newHeight = $(".slideClone").height();
$(".slideClone").remove();
$('#this').css('height',newHeight + 'px');下面是完整的http://jsfiddle.net/RHPQd/示例
Stack Overflow用户
发布于 2011-02-22 09:28:14
所以我已经回答了我自己的问题:)
@True的答案是关于将元素转换到特定高度。这样做的问题是我不知道元素的高度(它可能会波动)。
我找到了其他使用max-height作为过渡的解决方案，但这对我来说产生了一个非常陡峭的动画。
我下面的解决方案只能在WebKit浏览器中使用。
虽然不是纯粹的CSS，但它涉及到高度的转换，这是由一些JS决定的。
$('#click-me').click(function() {
var height = $("#this").height();
if (height > 0) {
$('#this').css('height', '0');
} else {
$("#this").css({
'position': 'absolute',
'visibility': 'hidden',
'height': 'auto'
});
var newHeight = $("#this").height();
$("#this").css({
'position': 'static',
'visibility': 'visible',
'height': '0'
});
$('#this').css('height', newHeight + 'px');
}
});#this {
width: 500px;
height: 0;
max-height: 9999px;
overflow: hidden;
background: #BBBBBB;
-webkit-transition: height 1s ease-in-out;
}
#click-me {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>
View on JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5072526
复制相关文章
相似问题
腾讯云开发者
