firefox-main/third_party/node/node_modules/react-transition-group/cjs
Name Description Size Coverage
config.js 167 -
CSSTransition.js A transition component inspired by the excellent [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should use it if you're using CSS transitions or animations. It's built upon the [`Transition`](https://reactcommunity.org/react-transition-group/transition) component, so it inherits all of its props. `CSSTransition` applies a pair of class names during the `appear`, `enter`, and `exit` states of the transition. The first class is applied and then a second `*-active` class in order to activate the CSS transition. After the transition, matching `*-done` class names are applied to persist the transition state. ```jsx function App() { const [inProp, setInProp] = useState(false); return ( <div> <CSSTransition in={inProp} timeout={200} classNames="my-node"> <div> {"I'll receive my-node-* classes"} </div> </CSSTransition> <button type="button" onClick={() => setInProp(true)}> Click to Enter </button> </div> ); } ``` When the `in` prop is set to `true`, the child component will first receive the class `example-enter`, then the `example-enter-active` will be added in the next tick. `CSSTransition` [forces a reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215) between before adding the `example-enter-active`. This is an important trick because it allows us to transition between `example-enter` and `example-enter-active` even though they were added immediately one after another. Most notably, this is what makes it possible for us to animate _appearance_. ```css .my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; } ``` `*-active` classes represent which styles you want to animate **to**, so it's important to add `transition` declaration only to them, otherwise transitions might not behave as intended! This might not be obvious when the transitions are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in the example above (minus `transition`), but it becomes apparent in more complex transitions. **Note**: If you're using the [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear) prop, make sure to define styles for `.appear-*` classes as well. 14549 -
index.js 1023 -
ReplaceTransition.js The `<ReplaceTransition>` component is a specialized `Transition` component that animates between two children. ```jsx <ReplaceTransition in> <Fade><div>I appear first</div></Fade> <Fade><div>I replace the above</div></Fade> </ReplaceTransition> ``` 5199 -
SwitchTransition.js Enum of modes for SwitchTransition component @enum { string } 7752 -
Transition.js The Transition component lets you describe a transition from one component state to another _over time_ with a simple declarative API. Most commonly it's used to animate the mounting and unmounting of a component, but can also be used to describe in-place transition states as well. --- **Note**: `Transition` is a platform-agnostic base component. If you're using transitions in CSS, you'll probably want to use [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition) instead. It inherits all the features of `Transition`, but contains additional features necessary to play nice with CSS transitions (hence the name of the component). --- By default the `Transition` component does not alter the behavior of the component it renders, it only tracks "enter" and "exit" states for the components. It's up to you to give meaning and effect to those states. For example we can add styles to a component when it enters or exits: ```jsx import { Transition } from 'react-transition-group'; const duration = 300; const defaultStyle = { transition: `opacity ${duration}ms ease-in-out`, opacity: 0, } const transitionStyles = { entering: { opacity: 1 }, entered: { opacity: 1 }, exiting: { opacity: 0 }, exited: { opacity: 0 }, }; const Fade = ({ in: inProp }) => ( <Transition in={inProp} timeout={duration}> {state => ( <div style={{ ...defaultStyle, ...transitionStyles[state] }}> I'm a fade Transition! </div> )} </Transition> ); ``` There are 4 main states a Transition can be in: - `'entering'` - `'entered'` - `'exiting'` - `'exited'` Transition state is toggled via the `in` prop. When `true` the component begins the "Enter" stage. During this stage, the component will shift from its current transition state, to `'entering'` for the duration of the transition and then to the `'entered'` stage once it's complete. Let's take the following example (we'll use the [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook): ```jsx function App() { const [inProp, setInProp] = useState(false); return ( <div> <Transition in={inProp} timeout={500}> {state => ( // ... )} </Transition> <button onClick={() => setInProp(true)}> Click to Enter </button> </div> ); } ``` When the button is clicked the component will shift to the `'entering'` state and stay there for 500ms (the value of `timeout`) before it finally switches to `'entered'`. When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`. 19938 -
TransitionGroup.js The `<TransitionGroup>` component manages a set of transition components (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition components, `<TransitionGroup>` is a state machine for managing the mounting and unmounting of components over time. Consider the example below. As items are removed or added to the TodoList the `in` prop is toggled automatically by the `<TransitionGroup>`. Note that `<TransitionGroup>` does not define any animation behavior! Exactly _how_ a list item animates is up to the individual transition component. This means you can mix and match animations across different list items. 7648 -
TransitionGroupContext.js 335 -
utils -