我有一个容器 - 想象它包含应用程序中的页面。我使用animate.css从一个页面滑动到另一个页面。页面具有不同的高度(根据其内容),因此容器必须调整大小以适应。基于儿童身高的动画高度
我不能为我的生活得到高度动画!
CodePen(和下面的代码)演示了页面之间的工作滑动动画,但容器的高度只是瞬间改变。
http://codepen.io/anon/pen/jqbExY
HTML:
<button id=btn>animate</button>
<main>
<section class="first">Little content</section>
<section class="second">Lots of content ........</section>
</main>
CSS:
button {
display: block;
margin: auto;
}
main {
border: 1px solid black;
width: 400px;
margin: auto;
min-height: 100px;
height: auto;
transition: height 1s linear;
}
.first {
background-color: red;
}
.second {
background-color: green;
display: none;
}
.leave {
position: absolute;
}
的JavaScript(jQuery的只是示范,在现实中我使用角):
$('#btn').on('click', function() {
var $first = $('.first');
$first.addClass('slideOutLeft animated leave').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
$first.hide();
});
$('.second').addClass('slideInRight animated').show();
});
给.first和.second一个不变的高度,如下所示:**。first {height:250px; .......} ** –
我不能,他们的高度是基于他们的内容。即使我这样做了,如果不将这些高度归因于“main”,它仍然行不通。 http://codepen.io/anon/pen/XdmJOO – gberger