Переходы CSS и/или Javascript для перемещения div при добавлении или удалении классов

Ищу некоторые идеи о том, что возможно для моего проекта.

У меня есть контейнер div, в который я динамически загружаю контент. Если я хочу, чтобы контент располагался по центру, у меня есть классы, которые я помещаю в контейнер div (.center-content) и в содержащиеся div (#container .center-content). Если я не хочу, чтобы они центрировались, я удаляю классы с помощью removeClass(). Нет проблем.

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

Есть ли стратегия перехода css, которую я могу применить, согласно которой, если добавление или удаление класса приводит к перемещению div, я могу анимировать его движение (т.е. медленное или быстрое)?

Раньше я использовал явные CSS-анимации в качестве эффектов, но это кажется немного другим, и я не знаю, что возможно, а что нет.

Спасибо,

Джоэл
Вот jsfiddle в качестве примера. http://jsfiddle.net/zdbbf/1/

Я бы хотел, чтобы переход был более плавным при удалении центрирования.

HTML:

<div id="mycontainer" class='centered'>
    <div id="mycontent" class='centered'>
        <span>I'm a centered div</span>
    </div>
    <button id="mybutton">click to remove centering</button>
</div>

CSS:

#mycontainer {
    height: 400px;
    width: 400px;
     border: 1px solid grey;
    background-color: grey;
}

#mycontent {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    text-align: left;
}

.centered {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#container .centered {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

JS:

$("#mybutton").on("click",function() {
    $("#mycontent").removeClass("centered");
});

html jquery css css-animations
person Joel    schedule 09.12.2013    source источник
comment
Вы можете переходить классы с помощью jQuery, но ваш вопрос не подходит для SO, как он написан.   -  person isherwood    schedule 10.12.2013
comment
-isherwood, какую информацию я могу добавить, чтобы улучшить вопрос? -codehorse, на самом деле я просто ищу способ смягчить переходы, которые теперь немного раздражают пользователя.   -  person Joel    schedule 10.12.2013
comment
Вопросы SO обычно требуют кода. Ваш вопрос слишком широк.   -  person isherwood    schedule 10.12.2013
comment
stackoverflow.com/questions/8935372/   -  person isherwood    schedule 10.12.2013
comment
хорошо, это СУЩЕСТВУЕТ, потому что я пытаюсь определить, возможно ли это вообще. Но ваша точка зрения хорошо понята, я добавил jsfiddle с конкретным примером, надеюсь, это даст больше контекста, если кто-то захочет прокомментировать. Спасибо.   -  person Joel    schedule 10.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы знаете точную ширину и положение, вы можете применить переход CSS margin

#mycontent {
    -webkit-transition: margin 2s;
    -ms-transition: margin 2s;
    -moz-transition: margin 2s;
    transition: margin 2s;
    margin-left: 0;
}
#mycontent.centered {
    margin: 0 150px;
}

JSFiddle

person Olaf Dietsche    schedule 09.12.2013
comment
Спасибо, Олаф. Посмотрим, смогу ли я применить эту технику. Обычно у меня не было бы такой маржи, но, возможно, я могу сделать что-то подобное. - person Joel; 10.12.2013
comment
Правильно ли будет сказать, что для создания такого типа анимации нужно начинать с известного левого поля от и до? - person Joel; 10.12.2013
comment
Да, по крайней мере, это то, что я прочитал из список анимируемых свойств. Кажется, вы можете опустить margin-left: 0. Хотя, когда вы замените 150px на auto, анимация не будет выполняться, а произойдет переход в целевую позицию. - person Olaf Dietsche; 10.12.2013