React 공식 홈페이지 애니메이션 라이브러리의 새로운 작성 방법(react-transition-group)

이 글은 주로 React 공식 웹사이트 애니메이션 라이브러리(react-transition-group)의 새로운 작성 방식을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 전환 그룹 공식 웹사이트에서 제공하는 애니메이션 전환 라이브러리입니다.

리액트 애니메이션에 관해 인터넷을 검색해 보니 오래 전의 이전 버전에서 나온 답변이 많았고, 이제 공식적으로는 , 그래서 이 기록을 썼고, 필요한 사람들에게 몇 가지 팁도 제공했습니다.

1. 설치

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

react-transition-group 它是以前两个的合体版本，所以写下这个记录一下，同时也给一些需要的猿门给一些小的提示。
1、安装

//自己简单的封装了一个，该有的参数都由了，可以自行粘贴在自己的代码里面去试试。
class Fade extends React.Component {
  constructor(props) {
    super(props);
  }
  done =() => {
    // console.log('结束了')
  }
  addaddEndListener = (node) => { //原生时间transition运动的事件
    node.addEventListener('transitionend', this.done, false);
  }

  // 三个进入状态的事件，可以做你想做的事情
  onEnter = (node, isAppearing) => {
    console.log(isAppearing, 'onEnter')
  }
  onEntering = (node, isAppearing) => {
    console.log(isAppearing, 'onEntering')
  }
  onEntered = (node, isAppearing) => {
    console.log(isAppearing, 'onEntered')
  }

  // 三个退出的状态的事件
  onExit = (node) => {
    console.log('onExit')
  }
  onExiting = () => {
    console.log('onExiting')
  }
  onExited = () => {
    console.log('onExited')
    this.props.self()
  }
  render() {
    const { in: inProp, dur} = this.props;
    const defaultStyle = {
      transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
      transform: 'translateX(100px)',
      opacity: '0'
    }

    const transitionStyles = {
      entering: { transform: 'translateX(100px)', opacity: '0'},
      entered:  { transform: 'translateX(0px)', opacity: '1' },
      exiting: {transform: 'translateX(0px)', opacity: '1'},
      exited: {transform: 'translateX(0px)', opacity: '0'}
    };
    const duration = {
      enter: 300,
      exit: 300,
    }
    // 上面的都是基本参数，样式的转变以及时间的设定，具体的可以看官网文档
    // 样式也可以写成className 例如<MyComponent className={`fade fade-${status}`} />
    return (
      <Transition 
        onEnter={this.onEnter}
        onEntering={this.onEntering}
        onEntered={this.onEntered}

        onExit={this.onExit}
        onExiting={this.onExiting}
        onExited={this.onExited}

        addEndListener={this.addaddEndListener} 
        in={inProp} 
        unmountOnExit={false} // 为true 代表退出的时候移除dom
        appear={true} // 为true  渲染的时候就直接执行动画，默认false，
        timeout={duration}
      >
        {
          state => {
            console.log(state, '###') //你可以很直观的看到组件加载和卸载时候的状态
            return(
              <p style={{
                ...defaultStyle,
                ...transitionStyles[state]
              }}>
                {this.props.children}
              </p>
            )
          }
        }
      </Transition>
    );
  }
}

而官方提供的三个组建Transition,CSSTransition,TransitonGroup。

Transition

过渡组件(Transiton)允许您用一个简单的声明性API描述随着时间的推移从一个组件状态到另一个组件状态的转换。最常用的是用来动画一个组件的安装和卸载，但也可以用来描述在适当的过渡状态。默认情况下，该组件不会更改其呈现的组件的行为，它只跟踪组件的“进入”和“退出”的状态。由你来为这些状态定义效果。（翻译）
实际的情况就是你如果只写这个组件是没有任何的效果的，就和你写一个p一样。所以你需要给他们赋予一些参数才可以。例如下面这个例子

entering
entered
exiting
exited

其中上面的状态有四种：

let num = 1;
class Dnd extends React.Component {
  state = {
    ins: true,
    current: 1,
    dom: <p className={l.test}>
            ceshi weizhi {num}
          </p>
  }
  handle = (bool) => {
    this.setState({
      test: !bool
    })
  }
  end = () => {
    const that = this;
    num = num + 1;
    setTimeout(function () {
      that.setState({
        test: true,
        dom: <p className={l.test}>
              888888 {num}
            </p>
      }) 
    }, 500)
    
  }
  render () {
    const { location } = this.props
    const { test } = this.state;
    return (
      <MainLayout location={location}>
        <Button onClick={this.handle.bind(null, this.state.test)}>点击transition</Button>
        <Fade in={this.state.test} self={this.end}>
          {this.state.dom}
        </Fade>
      </MainLayout>
    )
  }
}
// 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。

组件的初始化状态都停留在exited
上面就是写的一个最基本的例子，下面是如何的调用

这个组件大概就是这样的，这样适合写一个tab类型的页面，在切换的时候可以展示不同的dom

state  = {
    star: false
}


<Button onClick={this.handleStar.bind(null, star)}>start</Button>
<CSSTransition
  in={star}
  timeout={300}
  classNames="star"
  unmountOnExit
>
  <p className="star">⭐</p>
</CSSTransition>

CSSTransition

此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同，参数为：classNames
参数：（主要）in, timeout, unmountOnExit, classNames, 用法同Transition。看如下例子：

.star {
    display: inline-block;
    margin-left: 0.5rem;
    transform: scale(1.25);
  }
  .star-enter {
    opacity: 0.01;
    transform: translateY(-100%) scale(0.75);
  }
  .star-enter-active {
    opacity: 1;
    transform: translateY(0%) scale(1.25);
    transition: all 300ms ease-out;
  }
  .star-exit {
    opacity: 1;
    transform: scale(1.25);
  }
  .star-exit-active {
    opacity: 0;
    transform: scale(4);
    transition: all 300ms ease-in;
  }

效果是点击button 显示星星，在点击消失星星的动画！
参数classNames="star"공식적으로 제공되는 세 가지 구성 요소는 Transition, CSSTransition 및 TransitonGroup입니다.

전환

전환 구성 요소(Transiton)를 사용하면 간단한 선언적 API를 사용하여 시간이 지남에 따라 한 구성 요소 상태에서 다른 구성 요소 상태로의 전환을 설명할 수 있습니다. 구성 요소의 설치 및 제거를 애니메이션화하는 데 가장 일반적으로 사용되지만 적절한 경우 전환 상태를 설명하는 데에도 사용할 수 있습니다. 기본적으로 이 구성 요소는 렌더링하는 구성 요소의 동작을 변경하지 않으며 구성 요소의 "들어가기" 및 "종료" 상태만 추적합니다. 이러한 상태에 대한 효과를 정의하는 것은 사용자의 몫입니다. (번역)

실제 상황은 이 컴포넌트만 쓰면 p처럼 아무 효과가 없습니다. 따라서 몇 가지 매개변수를 제공해야 합니다. 예를 들어 다음 예제

1、星星显示 对应的class为star-enter star-enter-active 动画走完为star-enter-done
2、星星消失 对应的class为star-exit  star-exit-active 动画走完为star-exit-done

에는 4가지 상태가 있습니다.

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter,
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit,
}}

구성 요소의 초기화 상태가 exited

에 유지됩니다. 위는 작성된 가장 기본적인 예제이며 다음은 이를 호출하는 방법입니다.

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, text: 'Buy eggs' },
        { id: 2, text: 'Pay bills' },
        { id: 3, text: 'Invite friends over' },
        { id: 4, text: 'Fix the TV' },
      ]
    }
  }

  render() {
    const { items } = this.state; 
    return (
      <p>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="fade"
            >
              <p>
                <Button
                  onClick={() => {
                    this.setState(state => ({
                      items: state.items.filter(
                        item => item.id !== id
                      ),
                    }));
                  }}
                >
                  &times;
                </Button>
                {text}
              </p>
            </CSSTransition>
          ))}
        </TransitionGroup>
        <Button
          type="button"
          onClick={() => {
            const text = prompt('Enter some text');
            if (text) {
              this.setState(state => ({
                items: [
                  ...state.items,
                  { id: 1123, text },
                ],
              }));
            }
          }}
        >
          Add Item
        </Button>
      </p>
    );
  }
}

.fade-enter {
    opacity: 0.01;
  }
  .fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
  }

CSSTransition

이 구성 요소는 전환의 표시, 시작 및 종료 단계에서 한 쌍의 클래스 이름(즉, className)을 적용하고 이를 사용하여 CSS 애니메이션을 활성화합니다. 따라서 매개변수는 일반적인 className과 다릅니다. 매개변수는 classNames

매개변수: (주로) in, timeout, unmountOnExit, classNames이며 사용법은 Transition과 동일합니다. 다음 예를 보세요:

1、component  default 'p' 也就是TransitionGroup渲染出来的标签为p，也可以就行更改，例如component="span" 渲染出来的就是span标签了
2、children 相当于你给的组件，可以是字符串或者自定义组件等。
3、appear  写在TransitionGroup里面相当于开启或者禁止里面的Transition || CSSTransition 方便写的作用

버튼을 클릭하면 별이 표시되고, 별 애니메이션을 클릭하면 사라지는 효과가 있습니다! Parameter classNames="star", 컴포넌트는 다음과 같이 해당 State의 className을 찾습니다.

rrreee

실행 순서는

rrreee

공식 홈페이지의 설명을 따르면 됩니다. 관심이 있으시면 직접 시도해 보시기 바랍니다.

rrreee

각 스테이지의 Hook 기능은 Transition과 동일합니다.

TransitionGroup
그룹을 보면 확실히 목록형 애니메이션인 걸 알 수 있어요! 하지만 공식 웹사이트를 읽은 후 TransitionGroup은 어떤 형태의 애니메이션도 제공하지 않는다는 것을 알게 되었습니다. 특정 애니메이션은 래핑한 Transition || CSSTransition의 애니메이션에 따라 달라지므로 목록에서 다양한 유형의 애니메이션을 만들 수 있습니다. 예시를 살펴보겠습니다

rrreee

cssrrreee효과는 목록 항목 중 하나를 추가하고 삭제하여 페이딩 효과를 생성하는 것입니다! 직설적으로 말하면 여러 Transitions 또는 CSSTransitions를 조합한 효과입니다.

그러나 일부 매개변수도 제공합니다🎜rrreee🎜세 가지 구성 요소의 대략적인 특성은 다음과 같습니다. 나머지는 모두 여러분의 개발에 달려 있습니다! 설명을 위해 몇 가지 작은 예가 후속 작업에 포함될 것이므로 계속 지켜봐 주시기 바랍니다. . . . 🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜Native JS는 window.scrollTo()를 기반으로 수직 스크롤 애니메이션 도구 기능을 캡슐화합니다.🎜🎜🎜🎜🎜Jquery는 로딩 전환 마스크를 추가합니다🎜🎜

위 내용은 React 공식 홈페이지 애니메이션 라이브러리의 새로운 작성 방법(react-transition-group)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!