CSS3 애니메이션 및 DOM 업데이트하기

Question

가능하다면 CSS3 전환 및 새로운 기능에 대해 궁금합니다.

는이 아이가 그 안에 div를과 같이와 내가 사업부가 있다고 가정하자 :

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

내 목표는 내가 사과와 오렌지 div의 사이에 새로운 사업부를 추가 할 때, 내가하고 싶은 것입니다 두 div가 움직이면서 새 div가 입력됩니다.

저는 CSS3 전환을 수행하는 방법을 알아 내지 못했지만 제 질문은 전체 컨테이너 div가 dom에서 바뀌었다.

우리 디자인 때문에 AJAX 응답은 컨테이너에 들어가기위한 새로운 div로 응답하지 않습니다.

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

이 요소 생기를 교체 할 때이 같은 애니메이션이 가능 : 대신 같은 중앙에 새로운 사업부를 포함하여 다시 전체 사업부 컨테이너를 반환하지만? 이게 jQuery 작업인가요?

Answer 1

절대적으로 전체 div 컨테이너를 교체해야하는 경우 원하는 번역 효과를 얻는 방법이 없다고 생각합니다. 새로운 페이드 인으로 오래된 것이 사라지는 일종의 페이드 전환을 할 수 있습니다.

Answer 2

키 프레임이있는 CSS3 애니메이션을보십시오. 물론 웹킷과 파이어 폭스뿐입니다.

Answer 3

아담은 무엇 쉬울 것은 HTML에서 이미 사업부를하는 것입니다, 그냥 기본적으로

display: none; opacity: 0; 

에 자사의 CSS를 설정합니다. 원하는 액션이 ​​발생하면 div의 위치에 CSS 전환을 사용하여 멋지게 슬라이드하고 바나나 div에 불투명 전환을 적용하여 페이드 인으로 만들 수 있습니다. 내게 말하면 jsfiddle로 만들 수 있습니다. 버튼을 클릭하면 div가 나타나기를 원합니다.