Animate CSS, положение, ширина и высота по щелчку

У меня есть приложение с основным правом на боковой панели/макет главного контента, как это:Animate CSS, положение, ширина и высота по щелчку

<body> 
<div class="sidebar">Sub nav</div> 
<div class="main-content">Some content</div> 
</body>

Обычно основное содержание блока будет плавать слева от боковой панели .. довольно типичный макет. Тем не менее, я хочу разрешить пользователю щелчок некоторого btn на странице, который максимизирует основную область содержимого для заполнения всего тела. По сути, все это скрывает.

я могу применить класс с помощью JQuery, чтобы дать ОСНОВНОМУ содержанию дополнительных классов:

.main-content.maximize { 
position: absolute; 
left: 0; 
right: 0; 
bottom: 0; 
etc... 
}

, но я хотел бы, чтобы оживить в развернутом дисплей.

Обратите внимание, что я хочу анимировать основное содержание от относительного положения до абсолютного положения. Также потребуется анимация в исходное состояние.

Любые мысли о том, как это сделать, будут полезны.

источник

2014-11-25 trobbins26

Поэтому я должен был подумать немного из коробки на этом, но придумал это окончательное решение.

Вместо оживляющий основной контейнер с JS, я использовал JS для переключения классов на контейнере вокруг боковой и основной области контента, когда триггер щелкнул, как это:

$(document).on('click', '.toggle-view', function() { 
    $(".content .wrapper").toggleClass("full-width"); 
    $(this).toggleClass('full-view, standard-view'); 
});

Когда .wrapper получает. полная ширина, он активирует эффект перехода в CSS:

минимизации ширины боковой панели, а
максимизирует ширину основного контейнера.

См working sample here

источник

2014-12-02 16:19:29 trobbins26

Прежде всего, как уже было сказано in this question, вы не можете анимировать между relative и absolute позиционирование.

Однако вы можете сделать элемент абсолютно позиционированным непосредственно перед анимацией и сохранить его на одном и том же месте на экране, используя смещения, возвращаемые .position(). И когда вы хотите восстановить его обратно в свое обычное место, после анимации сделайте обратное и вернитесь в исходное положение и удалите смещения.

Если элемент был в потоке, вы также захотите предоставить заполнитель тех же размеров, чтобы сохранить свое пространство, чтобы в это пространство ничего не входило.

Я пробовал здесь, чтобы дать вам общее представление о том, что можно сделать, но это должно быть настроено на вашу конкретную ситуацию, поскольку оно не будет работать из коробки. Свертывание полей, поплавков, сдвинутое положение с относительным позиционированием может изменить отдельные части решения.

источник

2014-11-25 23:20:56

Идея кажется многообещающей, однако я не вижу ссылку на ваш пример. – trobbins26

$('div').click(function() { 
    $(this).css({ 
     'width' : $(this).width() * 1.1,  
     'height': $(this).height() * 1.1 
    }); 
});

источник

2014-11-26 09:13:38

Animate CSS, положение, ширина и высота по щелчку

ответ

Смежные вопросы