基于儿童身高的动画高度

问题描述：

我有一个容器 - 想象它包含应用程序中的页面。我使用animate.css从一个页面滑动到另一个页面。页面具有不同的高度（根据其内容），因此容器必须调整大小以适应。基于儿童身高的动画高度

我不能为我的生活得到高度动画！

CodePen（和下面的代码）演示了页面之间的工作滑动动画，但容器的高度只是瞬间改变。

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

答

宁比试图为容器的高度设置动画效果，您应该为其中的元素的高度设置动画效果。作为一个基本的例子，你可以这样做：

Codepen Update

CSS

.second { 
    background-color: green; 
    max-height: 0px; // Use max-height so you can animate without setting a fixed height 
    transition: 2s; 
    overflow: hidden; // Instead of display: none; 
} 
.height { 
    max-height: 200px; // Height is dynamic up to 200px 
}

JQuery的

$('.second').show().addClass('slideInRight animated height');

这是一个好开始！但是如果第一页有更多的内容就会中断... – gberger

答

转变不height: auto工作，但你可以找到方法：

1-您可以尝试测量身高在JavaScript每一个新的股利，并设置你的<main>容器这个高度：动画将触发

2 - 您可以使用一个小调整，并设置动画上max-height然后修改max-height比你的DIV更大的价值。

基于儿童身高的动画高度

相关推荐