Question

我创建了一个效果，其中HTML元素最初隐藏在另一个HTML元素后面，并且隐藏元素的CSS“top”值被动画化，以便以平滑的滑动动作从masking元素下方公开它。

有没有人知道是否有办法在没有屏蔽元素的情况下重新创建此效果？

我想避免使用jQuery'esque slideDown，其中显示的元素的高度是动画的。

我觉得这是不可能的，但如果有人知道，你的建议将不胜感激。

Answer 1

您可以使用overflow设置为hidden的包装器轻松完成此操作

HTML

<div id="wrapper" style="height:0px;">
    <div>content</div>
</div>

示例CSS

#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}

的Javascript

//if you must not use jQuery
var animationTimer = setInterval(function(){
    var wrapper = document.getElementById("wrapper");
    wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
    if(parseInt(wrapper.style.height) >= 280)
        clearInterval(animationTimer)
},1);

//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);

Answer 2

将您的元素放在包含overflow:hidden的父div中。然后，将元素放置在父div的边界之外，以便隐藏它。

#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */

然后，您可以通过动画显示{"top":0}来显示它，以获得不会调整元素高度的滑动效果。

这是一个相当粗略的演示：http://jsfiddle.net/7RSWZ/

更新：这是另一个试图通过动态设置高度和top值来尝试更好地处理不同内容大小的演示。 http://jsfiddle.net/7RSWZ/2/

隐藏元素而不掩盖顶部的项目

2 个答案:

HTML

示例CSS

的Javascript