0

웹 페이지에 MVC를 사용하는 경우, 특히 데이터 (모델)를 수정하고 뷰를 모델을 "관찰"하여 모델에 대한 변경이 이루어지면 뷰가 자동으로 업데이트되고 모델을 반영합니다. 어떻게 애니메이션을 만들 수 있습니까?자바 스크립트 MVC를 사용한다면 어떻게 뷰를위한 애니메이션을 가질 수 있습니까?

(업데이트 : 뷰입니다 같은 콧수염 또는 핸들 바, 예를 들어, can.js에, 그래서 우리는 애니메이션을 할 수있는 방법처럼 템플릿?) 우리가 두 개의 행이있는 경우 예를 들어

말 카드. 사용자는 첫 번째 행을 클릭하여 카드를 두 번째 행으로 "이동"할 수 있습니다. 그래서 우리는 MVC를 사용하지 않는다면 Row 1에서 카드를 페이드 아웃하고 Row 2의 끝에서 카드를 페이드 아웃시킬 수 있습니다. 그러나 실제로 2 개의 배열을 사용하고 2 개의 뷰가이 두 개의 배열을 관측하고 두 개의 배열이 어떻게 변경 되더라도 뷰는 모델을 반영합니다. 그러면 어떻게 실제로 페이드 아웃 및 페이드 인 할 수 있습니까? 보기가 opacity: 0을 사용하여 카드를 표시하지 않고 CSS 전환을 사용하여 카드의 소멸 및 모양을 애니메이션으로 표시하지만 카드가 여전히 빈 공간 (여전히 화면 공간을 차지함)으로 표시되는 경우에만 생각할 수 있습니다. 불투명도는 0입니다. 문제는 뷰가 자동으로 모델이 무엇인지 보여줄 수는 있지만 애니메이션은 여전히 ​​유지할 수 있습니까?

+0

여기서 중요한 점은 데이터 _change_이 관찰된다는 것입니다. 즉, 카드가 한 상태에서 다른 상태로 넘어갈 때 애니메이션 (보기 관련 프로세스)을 시작합니다. 이 애니메이션을 언제 시작할 것인지 결정할 때는 언제 볼 수 있습니다. – raina77ow

+0

나는 당신이 무엇을 의미하는지 정확히 안다. 나는 좋은 해결책을 제안 할 수 없다. 내가 보았던 모든 코드 (예를 들어 백본의 경우)는 이것을 수동으로 수행합니다. 즉, jquery를 사용하여 직접 요소를 이동시킵니다. Angular가이 문제를 해결하는 유일한 프레임 워크 인 것 같습니다. http://docs.angularjs.org/guide/animations – Sebastian

+0

https://github.com/stevenvachon/can-transition – Sebastian

답변

1

행에 추가하고 행에서 제거하면 상태가 변경됩니다. 애니메이션은 상태 변화를 시각화하는 방법 일뿐입니다.

사실 매우 간단합니다. 모든 상태 변경 (Add = Fade In, Remove = Fade Out ...)에 사용할 애니메이션을 결정하면 상태 변경이 발생하면 해당 애니메이션을 수행하십시오.

+0

시도해 볼 수도 있습니다. 분명히 질문에, 그보기는 단지 쥐 수염이나 손잡이 줄과 같은 템플릿 일뿐입니다. 그래서 우리는 어떻게 움직일 수 있습니까? –

관련 문제