我有一个内容 div,还有一个位于第一个 div 下方的 div。第一个 div 的内容是动态变化的,它的高度也会根据需要而变化。通常,随着第一个 div 的高度变化,第二个 div 的位置会自动上下颠簸。如何为第二个 div 设置动画,最好只使用 CSS 和 JS(不使用 jQuery)?
这是一个视觉效果:
左边是我的两个 div,最初。有时,div1 会扩大高度以适应其内容,然后将 div2 向下推。如何为 div2 的运动设置动画?
我有一个内容 div,还有一个位于第一个 div 下方的 div。第一个 div 的内容是动态变化的,它的高度也会根据需要而变化。通常,随着第一个 div 的高度变化,第二个 div 的位置会自动上下颠簸。如何为第二个 div 设置动画,最好只使用 CSS 和 JS(不使用 jQuery)?
这是一个视觉效果:
左边是我的两个 div,最初。有时,div1 会扩大高度以适应其内容,然后将 div2 向下推。如何为 div2 的运动设置动画?
- 演示:http: //jsbin.com/uwoxek
function init() {
var header = document.getElementById('header');
var header_height = header.offsetHeight;
header.style.height = '10px';
header.style.overflow = 'hidden';
var i = 0;
var animation = setInterval(function () {
if (i <= header_height) {
header.style.height = (10 + i) + 'px';
} else {
clearInterval(animation);
header.style.overflow = 'block';
}
i++;
}, 10);
}
好的,也许需要一些注释?你必须移动的不是“第二个”div,而是“第一个”,通过移动会自动将第二个推到底部(或第一个的末尾)希望这有帮助
演示:http: //jsfiddle.net/xS3y7/
#div1 {
width: 50px; // Parent div needs width and height for this to work.
height: 50px;
background-color : red;
position: relative;
}
#div2 {
position: absolute; //positioning based on parent.
width: 100%; // 100% width of parent
height: 20%; // 20% width of parent
background-color: blue;
bottom: 0px; // Place on the bottom
}
需要注意的重要一点是,父级<div>
必须具有绝对或相对定位,子级<div>
必须具有绝对定位。绝对定位基于其最近的父元素(在本例中为#div1
)定位。绝对定位使我们能够将元素放置在我们想要的任何位置(相对于父元素),计算值关闭,所以这真的很强大。
如果想好好阅读,请查看CSS-Tricks上的 Chris Coyier 。