переходы css3: плавная анимация размещения на плавающих элементах - PullRequest
Новая
       39

переходы css3: плавная анимация размещения на плавающих элементах

1 голос
/ 28 июня 2011

Я хотел бы заархивировать что-то вроде плавных переходов макета в Silverlight или как это видно в новом представлении css-переходов с фотолистом в skydrive. Я думал, что это можно сделать с помощью CSS3.

при условии, что у меня есть что-то вроде этого: 

<div class="items">
    <div class="item">
        1
    </div>
    <div class="item">
        2
    </div>
    <div class="item">
        3
    </div>
</div>

<style>
    .item {
        float: left;
    }
</style>

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

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

Есть ли способ сказать что-то вроде transition: left, top 1s ease-in-out;?

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

Здесь - это видео с 9-го канала, которое показывает несколько эффектов, я говорил о том, который появляется около 1:20.

1 Ответ

0 голосов
/ 07 сентября 2011

jQuery делает именно это. Но вернемся на секунду.

У меня расплывчатые глаза, и мне нужно так спать, поэтому я прошу прощения, если это только наполовину связно, но, возможно, это укажет вам правильное направление.

Во-первых, важно рассмотреть правильный инструмент для работы. CSS3 потрясающий, но не очень обратно совместимый, так что вы все равно зависите от javascript для более старых браузеров. Если вы действительно хотите пойти на это, Nuttuts всегда отличный ресурс, и вот статья о CSS3 :

Без сомнения, я бы предложил jQuery (библиотеку javascript). Вам не нужно использовать абсолютное позиционирование, и это все о вашей конкретной цели. Вы должны опубликовать это, чтобы получить более конкретный совет. Animate () - это хорошая универсальная функция, наряду с Fadin (), fadeout (), которая должна удовлетворить именно эту потребность. Ищите примеры, и вы должны найти то, что ищете.

Там есть готовые скрипты и инструменты практически для всего, что вы можете себе представить, я бы поинтересовался скриптами / плагинами именно для того, что вы ищете. Скорее всего, это там. Это довольно популярная потребность, по крайней мере, эта общая концепция.

Удачи! (если у вас возникли проблемы, присылайте больше подробностей о точной цели / функции и, если у вас есть, укажите сайт в том виде, в котором он есть)

...