react-transition-group

Today, I was looking at the React-Transition-group, and I noticed that there was an extra component:

Yi? Strange, I remember before clearly only three ah, when the update out, curiosity drove me to point into the new SwitchTransition, is not to see, a look startled ah!

Considering your English level… This is a transition component inspired by Vue Transition modes. To tell you the truth, I often use both Vue and React. I always think that the transition component of Vue is similar to the react-transition-group component of React. They almost changed their names, and the usage of everything is similar. Maybe they both copied Ng-Animate, Angular’s animation library. Oh no, should call, who was inspired by the who (is there a feeling changed a word up) on the instant becomes tall, actually had everyone is open source, the good thing was borrowed to absorb one thing is very good, but because of the vue always gives the impression of is a very good reference is not very good innovators, React is the opposite. Therefore, people subconsciously always thought that Vue borrowed React. Until today, I found that the original pattern vue had already had, react-transition-group, which is the transition mode, has just been realized

The transition of the vue

Vue transition Modes the vue transition modes website is very detailed, so I won’t repeat it here, but it provides a portal: Vue Transition modes. When you switch components, can let going to remove the components and will enter the component has a animation effects, these two animation effects have a time difference, time difference has two modes, one is going to remove the components of the first animation, such as fade out, and when he finished it out, new components and then fade in, this time to form a complete set of the fading effect, The other pattern is the exact opposite, with new components fading in and old components fading out.

SwitchTransition

However, the same cool effects that are easy to implement in Vue are not implemented in React, so we have to implement the SwitchTransition itself.

usage

First of all, react transition components are not directly integrated into vUE core libraries like vUE, but need to be installed manually:

#npm
npm i react-transition-group -S

#yarn
yarn add react-transition-group
Copy the code

Then we’ll use React to imitate vue’s official case

// /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () = > setBool(b= >! b)return (
    <SwitchTransition>
      <CSSTransition classNames="fade" timeout={1000} key={bool ? "on" : "off"} >
        {
          bool ? (<button onClick={onClick}>on</button>)
               : (<button onClick={onClick}>off</button>)}</CSSTransition>
    </SwitchTransition>
  );
}

export default App;
Copy the code
/* /src/App.css */
.fade-enter..fade-exit-active {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-enter-active..fade-exit-active {
  transition: opacity 1s;
}
Copy the code

So far we have achieved the first example of vUE official website transition mode, next we achieve the second example ↓↓↓

// /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () = > setBool(b= >! b)return (
    <div className="relative">
      <SwitchTransition mode="in-out">
        <CSSTransition classNames="fade" timeout={500} key={bool ? "on" : "off"} >
          {
            bool ? (<button className="btn" onClick={onClick}>on</button>)
                : (<button className="btn" onClick={onClick}>off</button>)}</CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default App;
Copy the code
/* /src/App.css */
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active {
  transform: translateX(0);
  opacity: 1;
}
.fade-exit {
  transform: translateX(0);
}
.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active..fade-exit-active {
  transition: opacity .5s, transform .5s;
}
.relative {
  position: relative;
}
.btn {
  position: absolute;
  top: 0;
  left: 0;
}
Copy the code

  • The first example is the default mode: mode=”out-in”

The name makes sense: the old component performs the exit animation, then the new component performs the entry animation.

  • The second example is: mode=”in-out”

Just look at the GIFs: in, out.

There is only one mode property on the SwitchTransition component. The mode property has only two values :out-in and in-out. If out-in, even the mode property can be omitted because it is the default property.

Matters needing attention

  1. The

    component must have either a

    or a
    component in it, and cannot directly wrap the component you want to switch.
  2. The

    or
    component in the

    component no longer accepts the in attribute to determine the state of the element, but instead accepts the key attribute. The

    layer uses the key attribute to determine whether the component should perform the move in or out of the animation.

conclusion

Create a react-app and then yarn add React-transition-group. Create a react-app and then yarn add react-transition-group.

Previous excellent article

  • Microsoft launches comments section on GitHub
  • Vue 3.0.3: New CSS variable passing and the latest Ref Proposal
  • “Don’t underestimate the nine grid, one question can let a candidate reveal his true colors!”
  • “Mobile Layout Interview Questions to test your CSS Skills (Center)”
  • A series of confusing behaviors after setting prototype Objects as Proxies
  • Vue’s Super Fun New Feature: DOM Portal
  • A fun new feature of Vue: Introducing JS variables into CSS
  • Create your own Visual Data Map without any libraries
  • “Use of React’s Super-popular CSS-in-JS Library in the Vue Project: Styled – Components”
  • A Small Pit in Vue3 on IOS
  • Upgrade your React project to Immer instead of Immutable by 2020
  • “Soul Interrogation from the Author of React Hooks and Immutable”
  • Good news, Vue3 official document is available in Chinese!
  • Hooks use of the New VUe-Router
  • Vue 3:20 Years of Status Updates
  • React 17 is officially a transition version!
  • Yu Yuxi: The Design Process of Vue3
  • The Father of Node’s refactoring Deno is finally released. Will it Replace Node after all?
  • The Vue3 beta was released early this morning and openly supports scaffolding!