CSS3 анимация и обновление DOM

Question

Я новичок в переходах CSS3 и задаюсь вопросом, возможно ли это.

Допустим, у меня есть div с двумя дочерними элементами div, вот так:

<div id="container">
    <div id="apple">Apple</div>
    <div id="orange">Orange</div>
</div>

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

Меня не так беспокоитвыяснить, как сделать переходы CSS3, но мой вопрос заключается в том, возможно ли это, если весь контейнер div будет заменен в dom.

Так что из-за нашего дизайна наш ответ AJAX не отвечает просто новымdiv, чтобы войти в контейнер.Вместо этого он снова возвращает весь контейнер div, включая новый div в центре, например:

<div id="container">
    <div id="apple">Apple</div>
    <div id="banana">Banana</div>
    <div id="orange">Orange</div>
</div>

Возможно ли анимировать что-то подобное при замене элементов анимации?Это скорее задача jQuery?

Answer 1

Посмотрите на CSS3 анимацию с ключевыми кадрами.Это, конечно, только webkit и firefox.

Answer 2

Адам, что было бы проще, если бы div уже был в html, и просто установите его css на

display: none; opacity: 0;

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

Answer 3

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