Nouvelle méthode d'écriture de la bibliothèque d'animation du site officiel de React (react-transition-group)

Cet article présente principalement la nouvelle façon d'écrire la bibliothèque d'animation du site officiel de React (react-transition-group). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

.

1 , réagissez-transition-group est une bibliothèque de transition d'animation fournie par le site officiel.

J'ai cherché sur Internet à propos de l'animation de réaction. La plupart des réponses proviennent de l'ancienne version il y a longtemps, et maintenant la version officielle s'appelle react-transition-group C'est une version combinée des deux précédentes, donc je a écrit cet enregistrement, et donne également quelques conseils à ceux qui en ont besoin.
1. Installez

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

# yarn
yarn add react-transition-group

et les trois composants officiellement fournis Transition, CSSTransition, TransitonGroup.

Transition

Les composants de transition (Transiton) permettent de décrire les transitions d'un état de composant à un autre au fil du temps avec une simple API déclarative. Le plus souvent utilisé pour animer l'installation et la désinstallation d'un composant, mais peut également être utilisé pour décrire les états de transition, le cas échéant. Par défaut, ce composant ne modifie pas le comportement du composant qu'il restitue, il suit uniquement les états « entrant » et « sortant » du composant. A vous de définir les effets pour ces états. (Traduction)
La situation actuelle est que si vous écrivez uniquement ce composant, cela n'aura aucun effet, tout comme si vous écrivez un p. Il faut donc leur donner quelques paramètres. Par exemple, dans l'exemple suivant

//自己简单的封装了一个，该有的参数都由了，可以自行粘贴在自己的代码里面去试试。
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>
    );
  }
}

, il y a quatre états :

entering
entered
exiting
exited

L'état d'initialisation du composant reste à exited
. le plus basique écrit Par exemple, voici comment appeler

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>
    )
  }
}
// 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。

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

CSSTransition

Ce composant applique une paire de noms de classe (c'est-à-dire className) dans l'émergence. , les phases d'entrée et de sortie de la transition. Utilisez-le pour activer les animations CSS. Par conséquent, les paramètres sont différents du className habituel. Les paramètres sont : classNames
Paramètres : (principalement) in, timeout, unmountOnExit, classNames, l'utilisation est la même que Transition. Regardez l'exemple suivant :

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>

L'effet est de cliquer sur le bouton pour afficher les étoiles, et de cliquer sur l'animation des étoiles pour disparaître !
ParamètreclassNames="star", le composant cherchera le className de l'état correspondant, comme suit

.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;
  }

L'ordre d'exécution est

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

Si vous suivez l'explication sur le site officiel, c'est comme suit, si vous êtes intéressé Vous pouvez l'essayer vous-même.

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,
}}

La fonction d'accroche de chaque étape est la même que celle de Transition.

TransitionGroup

Dès que vous regardez le groupe, vous saurez qu'il doit être une animation en forme de liste ! Mais après avoir lu le site officiel, j'ai appris que TransitionGroup ne fournit aucune forme d'animation. L'animation spécifique dépend de l'animation de Transition || CSSTransition que vous avez enveloppée, vous pouvez donc créer différents types d'animations dans la liste. Regardons un exemple ci-dessous

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>
    );
  }
}

css

.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;
  }

L'effet est d'ajouter et de supprimer l'un des éléments de la liste, produisant un effet de fondu ! Pour parler franchement, c'est l'effet d'une combinaison de plusieurs Transitions ou CSSTransitions.
Mais il fournit également quelques paramètres

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

Les caractéristiques approximatives des trois composants sont les suivantes. Le reste, c'est à vous de le développer ! Quelques petits exemples seront inclus dans la suite pour expliquer, alors restez à l'écoute. . . .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Native JS encapsule la fonction de l'outil d'animation à défilement vertical basée sur window.scrollTo()

Jquery ajoute un masque de transition de chargement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!