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

Question

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

0

Я работаю над приложением 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. Вы можете видеть, что проблема связана с верхним и нижним позиционированием нижнего колонтитула/заголовка.

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

Благодарю!

Sebastian 14 нояб. 2013, в 15:38

Источник

2

Что-то вроде этого? jsfiddle.net/vKEua/4
Turnip 14 нояб. 2013, в 14:13
0

Да, у меня было и это решение, но проблема в том, что новая позиция расширенного нижнего колонтитула не может быть относительной. Он должен быть точно в 10 пикселях от верхнего заголовка, независимо от того, насколько высоко экран. :) Я знаю, это глупо, но это требование!
Sebastian 14 нояб. 2013, в 15:34

Теги:

javascript

html

css

css3

hardware-acceleration

1 ответ

Ещё вопросы

Да, у меня было и это решение, но проблема в том, что новая позиция расширенного нижнего колонтитула не может быть относительной. Он должен быть точно в 10 пикселях от верхнего заголовка, независимо от того, насколько высоко экран. :) Я знаю, это глупо, но это требование!

JerryHuang.me · Answer 1 · 2013-11-15T16-31-00.000Z

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

Одним из способов решения вашего требования 10px является onload get window.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/

Да, я знаю, что это работает, но это не очень хороший подход, я думаю, потому что вы смешиваете Layout и Javascript ... Не думаете ли вы, что есть другая возможность?