리스트 정렬을 애니메이션화하는 리액션.js 친화적인 방법은 무엇입니까?

리스트 정렬을 애니메이션화하는 리액션.js 친화적인 방법은 무엇입니까?

resact.js에 의해 세로 방향의 직사각형 항목 목록(최상위 점수)으로 렌더링된 점수가 있는 항목 목록이 있습니다.개별 항목을 마우스로 누르거나 클릭하면 추가 정보가 표시/숨겨져 수직 높이가 변경될 수 있습니다.

새로운 정보가 도착하여 점수가 약간 변경되어 일부 항목은 상위 항목이고 다른 항목은 하위 항목입니다.아이템이 즉시 새로운 위치에 나타나지 않고 동시에 새로운 위치에 애니메이션을 넣었으면 합니다.

React.js에서 이 작업을 수행할 수 있는 권장 방법이 있습니까? 아마도 인기 있는 애드온을 사용할 수 있습니다.

(D3를 사용한 이전과 유사한 상황에서 사용한 기술은 대략 다음과 같습니다.

1. 항목 DOM 노드와 함께 목록을 상대적인 위치와 함께 자연스러운 순서로 표시합니다.상대적인 위치 설정에서는 개별 항목의 익스텐트에 대한 다른 작은 변화(CSS 또는 JS-트리거)가 예상대로 다른 변화를 일으킨다.
2. 모든 DOM 노드를 한 번에 변환하여 실제 상대 좌표를 새로운 절대 좌표로 만듭니다. 이는 시각적 변화를 일으키지 않는 DOM 변경입니다.
3. 상위 항목 내의 DOM 노드의 순서를 새로운 정렬 순서(시각적인 변경을 일으키지 않는 또 다른 DOM 변경)로 변경합니다.
4. 모든 노드의 탑오프셋을 새 순서로 이전 모든 항목의 높이를 기준으로 계산된 새 값으로 애니메이션화합니다.이것이 유일하게 시각적으로 액티브한 단계입니다.
5. 모든 항목 DOM 노드를 오프셋되지 않은 상대 위치로 다시 변환합니다.이 경우에도 시각적인 변화는 발생하지 않지만 상대적인 위치에 있는 DOM 노드는 기본 목록의 자연스러운 순서로 내부 호버/확장/etc 스타일 변경을 적절하게 처리합니다.

지금 저는 리액트 같은 방법으로 같은 효과를 기대하고 있습니다.)

이 문제를 해결하기 위해 모듈을 출시했습니다.

https://github.com/joshwcomeau/react-flip-move

Magic Move / Shuffle과는 몇 가지 다른 기능이 있습니다.

1. 하드웨어 가속 60FPS+ 애니메이션을 위한 FLIP 기술을 사용합니다.
2. 지연 또는 지속 시간을 점진적으로 상쇄하여 셔플을 "인간화"할 수 있는 옵션을 제공합니다.
3. 인터럽트를 우아하게 처리하여 이상한 글리치 효과 없음
4. 시작/종료 콜백 등 기타 깔끔한 것 다수

데모를 확인해 주세요.

http://joshwcomeau.github.io/react-flip-move/examples/#/http://http:/http://joshwcomeau.github.io/react-flip-move/examples/

React Shuffle은 견고하고 최신입니다.Ryan Florences Magic Move 데모에서 영감을 받았습니다.

https://github.com/FormidableLabs/react-shuffle

이 질문이 좀 오래된 질문이라는 것을 알고 있습니다.여러분은 지금쯤 해결책을 찾으셨을 것입니다만, 이 질문을 접하는 다른 사람은 Ryan Florence의 MagicMove 라이브러리를 확인해 주십시오.이 라이브러리는 고객이 설명하는 정확한 시나리오를 처리하기 위한 리액트 라이브러리입니다.https://github.com/ryanflorence/react-magic-move

실제 상황 보기: https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424

편집: 이것은 React 0.14에서 파손되었습니다.다음 Tim Arney가 제안하는 대체 수단으로 React Shuffle을 참조하십시오.

애니메이션에 3부 라이브러리를 사용하고 싶지 않았기 때문에 React 라이프 사이클 메서드 getSnapshotBeforeUpdate()와 componentDidUpdate()를 사용하여 "FLIP" 애니메이션 기술을 구현했습니다.

목록 항목의 propes.index가 변경되면 getSnapshotBeforeUpdate()에서 이전 위치가 캡처되고 componentDidUpdate()에서 css 변환: translateY()가 적용되어 항목이 이전 위치에서 현재 위치로 애니메이션화됩니다.

class TreeListItem extends Component {

  constructor(props) {
    super(props);
    this.liRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps) {
    if (prevProps.index !== this.props.index) {
      // list index is changing, prepare to animate
      if (this.liRef && this.liRef.current) {
        return this.liRef.current.getBoundingClientRect().top;
      }
    }
    return null;
  }


  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.index !== this.props.index && snapshot) {
      if (this.liRef && this.liRef.current) {
        let el = this.liRef.current;
        let newOffset = el.getBoundingClientRect().top;
        let invert = parseInt(snapshot - newOffset);
        el.classList.remove('animate-on-transforms');
        el.style.transform = `translateY(${invert}px)`;
        // Wait for the next frame so we
        // know all the style changes have
        // taken hold.
        requestAnimationFrame(function () {
          // Switch on animations.
          el.classList.add('animate-on-transforms');
          // GO GO GOOOOOO!
          el.style.transform = '';
        });
      }
    }
  }

  render() {
    return <li ref={this.liRef}>
    </li >;
  }
}

class TreeList extends Component {

  render() {
    let treeItems = [];
    if (this.props.dataSet instanceof Array) {
      this.props.dataSet.forEach((data, i) => {
        treeItems.push(<TreeListItem index={i} key={data.value} />)
      });
    }

    return <ul>
      {treeItems}
      </ul>;
  }
}

.animate-on-transforms {
  /* animate list item reorder */
  transition: transform 300ms ease;
}

파티에는 늦었지만, 코드 한 줄로 DOM 요소 내에서 입출력 또는 이동 요소를 위한 애니메이션을 추가할 수 있는 AutoAnimate를 방금 출시했습니다.React, Vue 또는 기타 Javascript 프레임워크에서 작동하며 크기는 2kb 미만입니다.

오픈 소스 및 MIT 라이선스가 있으니 도움이 되길 바랍니다!

즉석에서 이 작업을 수행하는 가장 좋은 방법은 먼저 다음과 같이 모든 요소에 키를 부여하는 것입니다.

http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

다음으로 다음과 같은 CSS3 애니메이션을 정의합니다.

CSS3에 의한 리스트의 애니메이션화

기본적으로 렌더링 함수에서는 요소가 어디로 이동해야 하는지를 계산합니다. ReactJS는 요소를 원래 있어야 할 위치에 배치합니다(각 요소에 항상 동일한 키를 부여하십시오.이는 반드시 대응해야 합니다.JS는 DOM 요소를 올바르게 재사용합니다).적어도 이론적으로는 CSS가 reactjs/javascript 이외의 나머지 애니메이션을 관리해야 합니다.

디스카머...실제로 먹어본 적이 없어요;)

저는 방금 이 도서관을 찾았습니다: https://www.npmjs.com/package/react-animated-list, 매우 놀랍습니다. 아이들을 통과시키기만 하면 됩니다.

import { AnimatedList } from 'react-animated-list';
import { MyOtherComponent } from './MyOtherComponent';

const MyComponent = ({myData}) => (
  <AnimatedList animation={"grow"}>
    {otherComponents.map((c) => (
      <MyOtherComponent key={c.id} />
    ))}
  </AnimatedList>
)

데모: https://codesandbox.io/s/nifty-platform-dj1iz?fontsize=14&hidenavigation=1&theme=dark

잘 될 거야.

요소의 위치는 DOM 엔진에 따라 크게 달라지기 때문에 React 컴포넌트 내에서 순수하게 조정 및 애니메이션을 구현하는 것은 매우 어렵습니다.깔끔하게 하려면 적어도 요소의 현재 위치를 유지하는 Store, 요소의 다음 위치를 유지하는 Store(또는 이전 스토어와 결합하는 Store), 마지막 프레임까지 요소별 오프셋 여백을 적용하는 render() 메서드가 필요하다고 생각합니다.애초에 다음 포지션을 어떻게 계산하느냐도 과제입니다.그러나 요소가 위치만 바꾸므로 Store를 현재 위치와 함께 사용하여 다음 위치에서 오프셋을 바꾸면 요소 #0을 요소 #1과 바꿀 수 있습니다.

결국 외부 라이브러리를 사용하여 요소가 렌더링된 후 요소의 여백을 조작하는 것이 더 쉽습니다.

ReactCSTransition Group을 사용합니다.React with Addons 패키지에 포함되어 있어 이 사용 사례에 매우 적합합니다.이행을 적용하는 컴포넌트가 이미 DOM에 마운트되어 있는 것을 확인해 주세요.적절한 페이딩 천이에는 링크된 예에 있는 CSS를 사용합니다.

언급URL : https://stackoverflow.com/questions/27198479/whats-a-react-js-friendly-way-to-animate-a-list-reordering