リアクト遷移グループ - 2

スイッチトランジション

• 選択されたモードと、TransitinまたはCSSTransitionコンポーネントである子のキーに基づき、SeitchTransitionは一貫した遷移を行います。はそれらの間で一貫した遷移を行います。
• out-inモードが選択されている場合、SwitchTransitionは古い子が蟻から離れるまで待ち、それから新しい子を挿入します。
• in-outモードが選択されている場合、SwitchTransitionはまず新しい子を挿入し、新しい子が入るのを待ってから古い子を削除します。

import React from "react";
import { SwitchTransition, CSSTransition } from "react-transition-group";
import { Button, Form } from "react-bootstrap";
import "./styles.css";
const modes = ["out-in", "in-out"];
export default function App() {
 const [mode, setMode] = React.useState("out-in");
 const [state, setState] = React.useState(true);
 return (
 <>
 <div className="label">Mode:</div>
 <div className="modes">
 {modes.map(m => (
 <Form.Check
 key={m}
 custom
 inline
 label={m}
 id={`mode=msContentScript${m}`}
 type="radio"
 name="mode"
 checked={mode === m}
 value={m}
 onChange={event => {
 setMode(event.target.value);
 }}
 />
 ))}
 </div>
 <div className="main">
 <SwitchTransition mode={mode}>
 <CSSTransition
 key={state}
 addEndListener={(node, done) => {
 node.addEventListener("transitionend", done, false);
 }}
 classNames="fade"
 >
 <div className="button-container">
 <Button onClick={() => setState(state => !state)}>
 {state ? "Hello, world!" : "Goodbye, world!"}
 </Button>
 </div>
 </CSSTransition>
 </SwitchTransition>
 </div>
 </>
 );
}

小道具

小道具

子供たち

トランジショングループ

• <CSSTransition>このコンポーネントは 、トランジション・コンポーネントと同様に、トランジション・コンポーネントのセット（ および）をリストで管理 します。
• Todoリストに項目が削除されたり追加されたりすると、.NET Frameworkによって自動的にinプロパティが切り替わります。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import {
 Container,
 ListGroup,
 Button,
} from 'react-bootstrap';
import {
 CSSTransition,
 TransitionGroup,
} from 'react-transition-group';
import uuid from 'uuid';
import './styles.css';
function TodoList() {
 const [items, setItems] = useState([
 { id: uuid(), text: 'Buy eggs' },
 { id: uuid(), text: 'Pay bills' },
 { id: uuid(), text: 'Invite friends over' },
 { id: uuid(), text: 'Fix the TV' },
 ]);
 return (
 <Container style={{ marginTop: '2rem' }}>
 <ListGroup style={{ marginBottom: '1rem' }}>
 <TransitionGroup className="todo-list">
 {items.map(({ id, text }) => (
 <CSSTransition
 key={id}
 timeout={500}
 classNames="item"
 >
 <ListGroup.Item>
 <Button
 className="remove-btn"
 variant="danger"
 size="sm"
 onClick={() =>
 setItems(items =>
 items.filter(item => item.id !== id)
 )
 }
 >
 &times;
 </Button>
 {text}
 </ListGroup.Item>
 </CSSTransition>
 ))}
 </TransitionGroup>
 </ListGroup>
 <Button
 onClick={() => {
 const text = prompt('Enter some text');
 if (text) {
 setItems(items => [
 ...items,
 { id: uuid(), text },
 ]);
 }
 }}
 >
 Add Item
 </Button>
 </Container>
 );
}
ReactDOM.render(
 <TodoList />,
 document.getElementById('root')
);

.remove-btn {
 margin-right: 0.5rem;
}
.item-enter {
 opacity: 0;
}
.item-enter-active {
 opacity: 1;
 transition: opacity 500ms ease-in;
}
.item-exit {
 opacity: 1;
}
.item-exit-active {
 opacity: 0;
 transition: opacity 500ms ease-in;
}

小道具

コンポーネント

現れる

エンター

childFactory

チャイルドファクトリー

リアクト・ルーター

 import "./packages/react-router-dom/examples/Animation/styles.css";
import React from "react";
import {
 TransitionGroup,
 CSSTransition
} from "react-transition-group";
import {
 BrowserRouter as Router,
 Switch,
 Route,
 Link,
 Redirect,
 useLocation,
 useParams
} from "react-router-dom";
export default function AnimationExample() {
 return (
 <Router>
 <Switch>
 <Route exact path="/">
 <Redirect to="/hsl/" />
 </Route>
 <Route path="*">
 <AnimationApp />
 </Route>
 </Switch>
 </Router>
 );
}
function AnimationApp() {
 let location = useLocation();
 return (
 <div style={styles.fill}>
 <ul style={styles.nav}>
 <NavLink to="/hsl/">Red</NavLink>
 <NavLink to="/hsl//40">Green</NavLink>
 <NavLink to="/rgb//243">Blue</NavLink>
 <NavLink to="/rgb/6">Pink</NavLink>
 </ul>
 <div style={styles.content}>
 <TransitionGroup>
 {/*
 This is no different than other usage of
 <CSSTransition>, just make sure to pass
 `location` to `Switch` so it can match
 the old location as it animates out.
 */}
 <CSSTransition
 key={location.key}
 classNames="fade"
 timeout={300}
 >
 <Switch location={location}>
 <Route path="/hsl/:h/:s/:l" children={<HSL />} />
 <Route path="/rgb/:r/:g/:b" children={<RGB />} />
 </Switch>
 </CSSTransition>
 </TransitionGroup>
 </div>
 </div>
 );
}
function NavLink(props) {
 return (
 <li style={styles.navItem}>
 <Link {...props} style={{ color: "inherit" }} />
 </li>
 );
}
function HSL() {
 let { h, s, l } = useParams();
 return (
 <div
 style={{
 ...styles.fill,
 ...styles.hsl,
 background: `hsl(${h}, ${s}%, ${l}%)`
 }}
 >
 hsl({h}, {s}%, {l}%)
 </div>
 );
}
function RGB() {
 let { r, g, b } = useParams();
 return (
 <div
 style={{
 ...styles.fill,
 ...styles.rgb,
 background: `rgb(${r}, ${g}, ${b})`
 }}
 >
 rgb({r}, {g}, {b})
 </div>
 );
}
const styles = {};
styles.fill = {
 position: "absolute",
 left: 0,
 right: 0,
 top: 0,
 bottom: 0
};
styles.content = {
 ...styles.fill,
 top: "40px",
 textAlign: "center"
};
styles.nav = {
 padding: 0,
 margin: 0,
 position: "absolute",
 top: 0,
 height: "40px",
 width: "100%",
 display: "flex"
};
styles.navItem = {
 textAlign: "center",
 flex: 1,
 listStyleType: "none",
 padding: "10px"
};
styles.hsl = {
 ...styles.fill,
 color: "white",
 paddingTop: "20px",
 fontSize: "30px"
};
styles.rgb = {
 ...styles.fill,
 color: "white",
 paddingTop: "20px",
 fontSize: "30px"
};