CSS inline-block переходы

Краткое содержание

У меня есть страница, которую я использую, чтобы перечислить набор div. Они расширяются до полной ширины страницы, а размеры определяются процентами.

Я добавил три кнопки вверху, которые используют немного jQuery для управления раскладкой этих div. Например, если состояние включено (по умолчанию), то divs имеют 100% ширину и максимальную высоту 400 пикселей (ширина установлена равной 100%). Когда вторая кнопка нажата, а состояние 2 активировано, divs принимают 50% ширины и упорядочиваются по 2 в каждой строке. Когда состояние 3 активируется с помощью третьей кнопки, ширина его divs составляет 33% и упорядочивается по 3 в каждой строке.

Как я определил это, нужно добавить класс CSS в div через jQuery, чтобы выразить состояние, в котором оно находится в настоящее время. Каждый раз, когда новое состояние вызывается как противоположные состояния, удаляются через jQuery только для того, чтобы покрывать все базы независимо от того, что укажите его в настоящее время.

Все это работает отлично.

Проблема

Я хочу сделать переход между государствами максимально плавным. Несмотря на то, что добавление эффекта перехода в режим "вставка-выключение" обеспечивает плавное изменение размера. Фактическое перемещение div на новую строку мгновенно. Я бы предпочел переходное движение от его положения ниже к ряду выше, а не прыгать мгновенно.

Чтобы продемонстрировать желаемый переход, проверьте эту скрипту - http://jsfiddle.net/Mke7E/

Хотя это работает, оно основано на медиа-запросах и, очевидно, не на том, что я использую. Наряду с этим он использует фиксированную ширину/высоту и после небольшой игры вокруг я не могу воспроизвести функциональность и включить ее в свою.

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

Демонстрация моей проблемы

CodePen: http://codepen.io/anon/pen/MYLByw

Если вы заметили разницу между тем, как из состояния 1 в 2 происходит переход от второго div к верхней строке, но в jsfiddle из моего описания он почти перейдет к верхнему праву снизу. Это то, чего я пытаюсь достичь.

Мой код

JQuery

$( "a.full" ).on("click", function(e) {
    $( "div.box" ).removeClass( "half third" ).addClass("full");
    e.preventDefault();
});
$( "a.half" ).on("click", function(e) {
    $( "div.box" ).removeClass( "full third" ).addClass("half");
    e.preventDefault();
});
$( "a.third" ).on("click", function(e) {
    $( "div.box" ).removeClass( "half full" ).addClass("third");
    e.preventDefault();
});

HTML

<a href="#" class="full">STATE 1</a>
<a href="#" class="half">STATE 2</a>
<a href="#" class="third">STATE 3</a>

<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>

CSS:

div.box {
    width: 100%;
    left: auto;
    background-size: 100%;
    background-position: center center;
    height: 100%; 
    background-repeat: no-repeat;
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    background:red;
    text-align: center;
    transition: all 400ms ease-in-out;
    transform-origin: 50% 50%;
    white-space:nowrap; 
}
div.box.half {
    display: inline-block;
    width: 49%;
    white-space:nowrap;    
}

div.box.third {
    display: inline-block;
    width: 33%;
    white-space:nowrap;
}

a {
    width:100%;
    display:block;
}