Redux/Flux (ReactJS 포함) 및 애니메이션

Question

저는 React + Redux를 배우고 있으며 애니메이션을 수행하는 올바른 방법을 이해하지 못합니다. 예를 들어 설명해 드리겠습니다.

예를 들어 목록이있어 클릭시 항목을 삭제하고 싶습니다. 애니메이션 효과가 없다면 매우 쉽습니다. 클릭시 REMOVE_ITEM 액션을 전달하면 감속기가 저장소에서 항목을 제거하고 HTML을 다시 렌더링하는 반응을 보입니다.

클릭시 광고 항목을 삭제하는 애니메이션을 추가해 보겠습니다. 따라서 사용자가 항목을 클릭하면 광고 항목 제거 및 고급 효과를 실행하고 싶습니다. ? 내가 할 수있는 방법을 여러 가지 방법을 생각할 수 :

1) 클릭에 내가 REMOVE_ITEM 조치를 파견, 다음 감속기 다음 .fancy-dissolve-animation의 클래스와 그 요소를 렌더링 반응하고 내가 타이머를 실행 스토어에서 goingToBeDeleted 등의 항목을 표시 두 번째 작업은 REMOVE_ITEM_COMPLETED입니다. 이 아이디어는 마음에 들지 않습니다. 왜냐하면 여기에 JS 애니메이션을 추가하는 방법 (예 : TweenMax)과 CSS 애니메이션이 끝날 때 다시 렌더링하는 JS 타이머를 실행하는 방법이 여전히 불분명하기 때문입니다. 좋게 들리지 않는다.

2) ~ 30ms 간격으로 ITEM_REMOVE_PROGRESS 작업을 보내고 저장소에는 애니메이션의 현재 상태를 나타내는 "값"이 있습니다. 나는 그것을 좋아하지 않는다. 왜냐하면 만화가 ~ 2 초간의 애니메이 션을 위해 120 번 ~ 120 번 복사해야하기 때문이다. (말하자면 60fps의 부드러운 애니메이션을 원한다.) 그것은 단순히 메모리 낭비 일 뿐이다.

3) 애니메이션을 완성한 후 애니메이션을 완료 한 후에 만 ​​REMOVE_ITEM을 보내십시오. 그것이 내가 생각할 수있는 가장 적절한 방법이지만, 사용자가 조치를 취한 직후에 상점에서 물건을 바꾸고 싶습니다. 예를 들어, 애니메이션이 몇 초보다 오래 걸리고 REMOVE_ITEM이 백엔드와 동기화 될 수 있습니다. 백엔드 API 호출을하기 위해 애니메이션 마침을 기다릴 필요가 없습니다.

읽어 주셔서 감사합니다 - 어떤 제안이 필요하십니까?

Answer 1

React에는 ReactCSSTransitionGroup 도우미 클래스의이 문제에 대한 훌륭한 해결책이 있습니다 (https://facebook.github.io/react/docs/animation.html 참조). 이 옵션을 사용하면 React가 마지막 렌더시와 마찬가지로 자식의 DOM 상태를 유지함으로써이를 처리합니다. ReactCSSTransitionGroup 객체에 항목을 간단하게 래핑합니다.이것은 자식을 추적하고, 자식을 제거한 상태에서 렌더링 할 때 자식없이 렌더링하는 대신 자식과 함께 렌더링하지만 CSS 클래스를 자식에 추가합니다 (CSS 애니메이션을 트리거하는 데 사용할 수 있음). 간단하게 CSS 전환을 사용할 수 있습니다). 그런 다음 타임 아웃 (ReactCSSTransitionGroup에 전달 된 프롭으로 구성) 후에 DOM에서 자식을 제거한 상태로 다시 렌더링합니다.

ReactCSSTransitionGroup을 사용하려면 npm에 react-addons-css-transition-group을 설치 한 다음 'react-addons-css-transition-group'을 필요/가져 오기해야합니다. 애니메이션 문서는 더 자세한 정보를 제공합니다.

기억해야 할 한 가지 - 자녀가 고유하고 변경되지 않는 키를 가지고 있는지 확인하십시오. 인덱스를 키로 사용하면 올바르게 동작하지 않게됩니다.

Answer 2

인스턴트 액션은 상태를 저장하므로 문제가 발생하므로 조치를 보내면 스토어가 변경되며 다음 상태에서는 스토어에서이 변경 사항을 사용할 수 있으므로 상점에 애니메이션이 반복해서 표시되는 상황을 가질 수 있습니다 그러한 매개 변수가 설정되었습니다. 구성 요소의

{ 
    type:"SOME_ANIMATION", 
    id: new Date().getTime() //we get timestamp of animation init 
} 

다음의 일치 애니메이션을하지 않으면 애니메이션이 마지막 애니메이션 ID를 저장하고 실행합니다 REDUX 즉시 행동에 대한

내 솔루션 (동작 예제 코드)와 같은 일부 ID를 추가하는 것입니다. 우리가 상태를 반전하는 작업을하지 않고 하나의 조치를 할 수 있습니다

componentDidUpdate(){ 

if (this.lastAnimationId===this.props.animation.id) 
return; //the same animation id so do not do anything 

//here setState or do animation because it is new one 

this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation 

} 

감사 ID : 나는 예를 들어 (구성 요소 코드) 때문에 구성 요소 상태를 사용합니다. 타임 아웃 후 액션을 되 돌리는 것은 문제를 야기 할 수 있습니다. 왜냐하면 역 동작 전에 다른 액션 (컴포넌트와 연결됨)을 보내면 애니메이션을 다시 시작할 수 있기 때문입니다.

나에게 제안 된 접근 방식의 부족한 점은 애니메이션 데이터가 주에 존재하지만 애니메이션 정보도 제공된다는 것입니다. 따라서 store는 마지막으로 전달 된 애니메이션을 저장한다고 말할 수 있습니다.