CSS3是否等同于jQuery slideUp和slideDown？
CSS3是否等同于jQuery slideUp和slideDown？
提问于 2011-02-22 07:37:27
我的应用程序在使用jQuery的slideDown和slideUp时性能很差。我希望在支持它的浏览器中使用CSS3等效项。
在向下或向上滑动项目时，是否可以使用CSS3转换将元素从display: none;更改为display: block;？
回答 8
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>
Stack Overflow用户
发布于 2014-04-12 18:58:15
为什么不利用现代浏览器的css过渡，使用更多的css和更少的jquery使事情变得更简单、更快速
Here is the code for sliding up and down
Here is the code for sliding left to right
类似地，我们可以通过适当地更改transform-origin和transform: scaleX(0)或transform: scaleY(0)来更改从上到下或从右到左的滑动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5072526
复制相关文章
相似问题