Neue Schreibmethode der offiziellen React-Website-Animationsbibliothek (react-transition-group)

Dieser Artikel stellt hauptsächlich die neue Art des Schreibens der offiziellen React-Website-Animationsbibliothek vor. Sie hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen

1, React-Transition-Group ist eine Animationsübergangsbibliothek, die von der offiziellen Website bereitgestellt wird.

Ich habe vor langer Zeit im Internet nach Reaktionsanimationen gesucht, und jetzt heißt die offizielle Version

Es ist eine kombinierte Version der beiden vorherigen, also habe ich Ich habe dies geschrieben. Notieren Sie es und geben Sie auch einige Tipps an diejenigen, die es brauchen. react-transition-group
1. Installieren Sie

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

# yarn
yarn add react-transition-group

und die drei offiziellen Komponenten

, Transition, CSSTransition. TransitonGroup

Übergang

Übergangskomponenten (Transiton) ermöglichen es Ihnen, Übergänge von einem Komponentenzustand zu einem anderen im Laufe der Zeit mit einer einfachen deklarativen API zu beschreiben. Wird am häufigsten verwendet, um die Installation und Deinstallation einer Komponente zu animieren, kann aber gegebenenfalls auch zur Beschreibung von Übergangszuständen verwendet werden. Standardmäßig ändert diese Komponente nicht das Verhalten der von ihr gerenderten Komponente, sondern verfolgt nur den „Eintritts“- und „Austritts“-Zustand der Komponente. Es liegt an Ihnen, die Auswirkungen für diese Zustände zu definieren. (Übersetzung)

Die tatsächliche Situation ist, dass das Schreiben dieser Komponente keine Auswirkungen hat, genau wie wenn Sie ein p schreiben. Sie müssen ihnen also einige Parameter geben. Das folgende Beispiel

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

hat beispielsweise vier Zustände:

entering
entered
exiting
exited

Der Initialisierungsstatus der Komponente bleibt bei

exited. Das oben beschriebene Beispiel ist das einfachste um

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

aufzurufen. Diese Komponente wendet ein Paar Klassennamen (d. h. Klassenname) während der Emergenz-, Eintritts- und Austrittsphase des Übergangs an und aktiviert diese, um die CSS-Animation zu aktivieren . Daher unterscheiden sich die Parameter vom üblichen Klassennamen. Die Parameter sind:

classNames Parameter: (hauptsächlich) in, timeout, unmountOnExit, classNames, die Verwendung ist die gleiche wie bei Transition. Schauen Sie sich das folgende Beispiel an:

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>

Der Effekt besteht darin, auf die Schaltfläche zu klicken, um die Sterne anzuzeigen, und auf die Animation des Verschwindens der Sterne zu klicken!

Parameter
, die Komponente findet den Klassennamen des entsprechenden Zustands wie folgtclassNames="star"

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

Die Ausführungsreihenfolge ist

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

Wenn Sie der Erklärung auf der offiziellen Website folgen, Es ist wie folgt. Wenn Sie interessiert sind, können Sie es selbst ausprobieren.

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

Die Hook-Funktion jeder Stufe ist die gleiche wie bei Transition.

TransitionGroup

Sobald Sie sich die Gruppe ansehen, werden Sie wissen, dass es sich um eine Liste handeln muss -förmige Animation! Aber nachdem ich die offizielle Website gelesen habe, weiß ich, dass TransitionGroup keine Art von Animation bereitstellt. Die spezifische Animation hängt von der Animation der Transition CSSTransition ab, die Sie umschließen, sodass Sie verschiedene Arten von Animationen in der Liste erstellen können. Schauen wir uns unten ein Beispiel an

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

Der Effekt besteht darin, eines der Listenelemente hinzuzufügen und zu löschen, wodurch ein Fading-Effekt entsteht! Um es ganz klar auszudrücken: Es handelt sich um den Effekt einer Kombination mehrerer Transitionen oder CSSTransitions.

Aber es liefert auch einige Parameter

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

Die ungefähren Eigenschaften der drei Komponenten sind diese. Den Rest können Sie selbst weiterentwickeln! Zur Erläuterung werden im Anschluss einige kleine Beispiele beigefügt, also bleiben Sie dran. . . .

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Native JS kapselt die vertikale Scroll-Animationstoolfunktion basierend auf window.scrollTo()

Jquery fügt Ladeübergangsmaske hinzu

Das obige ist der detaillierte Inhalt vonNeue Schreibmethode der offiziellen React-Website-Animationsbibliothek (react-transition-group). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!