Переход CSS3: расширение фиксированного нижнего колонтитула или фиксированного заголовка до максимального размера без наложения Верхний колонтитул

Question

Я работаю над приложением html5, где у меня есть фиксированный заголовок и фиксированный нижний колонтитул.

Когда я нажимаю на нижний колонтитул, он должен скользить вверх, пока он не окажется на расстоянии 10 пикселей от заголовка.

То же самое должно произойти и для заголовка.

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 

CSS для компоновки по умолчанию легко: я просто использую абсолютное позиционирование сверху и снизу.

.header, .footer { 
    min-height:25px; 
    background:grey; 
    position:absolute; 
    left:0; 
    z-index:5; 
    /** transition **/ 
    transition: all 1s; 
} 

.header { 
    top:0; 
    background:red; 
} 

.footer { 
    bottom:0; 
    background:yellow; 
} 
.header.max { 
    bottom:35px; 
} 
.footer.max { 
    top:35px; 
} 

Это не касается части анимации. Я не хочу использовать анимацию Javascript! ТОЛЬКО CSS! Если нажать на верхний или нижний колонтитул я просто добавить класс max к элементу:

$(".header, .footer, .content").on("click", function() { 
    $(".max").removeClass("max"); 
    $(this).addClass("max"); 
}); 

анимация должна выглядеть сноска расширяется от дна.

Я создал JS-Fiddle. Вы можете видеть, что проблема связана с верхним и нижним позиционированием нижнего колонтитула/заголовка.

У кого-нибудь есть идея, как исправить это, чтобы анимация выглядела так, как нижний колонтитул расширяется со дна?

Спасибо!

Answer 1

Элементы перехода должны быть установлены в высоту для более плавных эффектов анимации. В моем примере у меня есть анимация заголовка и нижнего колонтитула, установленная на 300px, вам нужно изменить это с помощью JS на update class = "max" через window.height() или что-то подобное.

Один из способов решения вашего требования 10px - загрузить onload get.height() минус 10px, а затем обновить class = "max" с конечным результатом.

Что изменилось в вашем CSS:

.header, .footer { 
    min-height:25px; 
    background:grey; 
    position:absolute; 
    left:0; 
    z-index:5; 
    /** transition **/ 
    transition:height 2s; 
    -webkit-transition:height 2s; /* Safari */ 
} 

.header.max { 
    height:300px; 
} 
.footer.max { 
    height:300px; 
} 

Скрипки

http://jsfiddle.net/JSED5/3/