小编lei*_*ker的帖子

我想要一种仅使用CSS过渡的方法,以有效地(并且有吸引力地)在悬停时隐藏/显示内容.

需要注意的是,我希望保持动态(自动)高度.

似乎最佳路由是在a fixed height:0到a 之间转换height:auto,但是这还不是浏览器中的转换所支持的.

回应评论的澄清 ::这不是一个等待所有生活浏览器兼容CSS3的问题,而是解决CSS3本身的缺点(例如缺少height:0> height:auto)

我已经探索了其他一些方法,可以在下面的小提琴中查看(并在下面详细说明),但它们都不能满足我,我喜欢其他方法的反馈/提示.

http://jsfiddle.net/leifparker/PWbXp/1/

基本CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

缺点

一个.您需要随意设置一个较高的最大高度,这个动态内容可能会切断信息.

湾 如果作为(a)的预防措施,你需要设置一个非常高的最大高度,动画的延迟就会变得笨拙而且站不住脚,因为浏览器会无形地转换整个距离.也使缓和​​视觉效果降低.

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

缺点

一个.这很刺耳.它绝对比仅仅突然出现内容稍微好一些,并且通过转换不透明度来进一步销售效果,但总体而言,它不是那种视觉上的光滑.

.content { width:0%; …

我正在尝试使用jQuery UI构建一个响应式界面,它允许可移动和可调整大小的元素,即使屏幕调整大小也会保持成比例.

示例:http://jsfiddle.net/NSLmQ/3/

我使用的UI回调dragStop和resizeStop像素位置值转换为百分比值,用户已经完成了调整大小或拖动后.

function resizeStop(event, ui){
    convert_to_percentage($(this));
}

function dragStop(event, ui){
    convert_to_percentage($(this));
}

function convert_to_percentage(el){
    var parent = el.parent();
    el.css({
        left:parseInt(el.css('left'))/parent.width()*100+"%",
        top: parseInt(el.css('top'))/parent.height()*100+"%",
        width: el.width()/parent.width()*100+"%",
        height: el.height()/parent.height()*100+"%"
    });
}

如果父容器具有明确的高度和宽度,则此工作完全正常 - 在后续调整大小或拖动之前,jQuery UI将百分比转换回像素,并且在完成调整大小或拖动之后,我的回调将它们返回到百分比.所有的笨蛋.

当resizable元素的父级设置为height:auto时(在链接的小提琴中,我使用子图像为包含的父级提供高度),在调整大小期间会出现问题

当我尝试调整UI元素的大小时,jQuery UI会不正确地将顶部和左侧的百分比转换为像素,并且元素将跳转到位.

此问题似乎是特定于Chrome的.Firefox偶尔会出现迷你跳跃,但它们似乎只是略微四舍五入的问题.在Chrome中,位置转移是戏剧性的.

虽然在父容器上设置显式高度可以解决UI问题,但它不允许响应式解决方案.

有任何想法吗？

===========================================

晚更新

@ peteykun的答案解决了我的根本问题,但有一个分支问题,我认为可能值得解决.

Chrome在计算"自动"大小时使用子像素,因此通过jQuery获取高度会.height()返回一个不精确的舍入答案(并在像素和百分比之间转换时导致视觉抖动,反之亦然).

因此,使用Vanilla JS .getBoundingClientRect().height代替.height()返回子像素结果,以获得无抖动的解决方案.

function setContainerSize(el) {
    var parent = $(el.target).parent().parent();
    parent.css('height',  parent[0].getBoundingClientRect().height+'px');
}

再次感谢您的帮助,@ peteykun