Skip to content

Commit 4e06673

Browse files
committed
docs: make .appear-* classes more discoverable
There have been multiple reports where people didn't know that `appear` prop adds `.appear-*` classes, so these changes attempt to make this information more discoverable.
1 parent 18ad904 commit 4e06673

File tree

2 files changed

+19
-10
lines changed

2 files changed

+19
-10
lines changed

src/CSSTransition.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ const removeClass = (node, classes) => node && classes && classes.split(' ').for
6969
* ```
7070
*
7171
* `*-active` classes represent which styles you want to animate **to**.
72+
*
73+
* **Note**: If you're using the
74+
* [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
75+
* prop, make sure to define styles for `.appear-*` classes as well.
7276
*/
7377
class CSSTransition extends React.Component {
7478
static defaultProps = {
@@ -221,13 +225,13 @@ CSSTransition.propTypes = {
221225
...Transition.propTypes,
222226

223227
/**
224-
* The animation classNames applied to the component as it enters, exits or
225-
* has finished the transition. A single name can be provided and it will be
226-
* suffixed for each stage: e.g.
228+
* The animation classNames applied to the component as it appears, enters,
229+
* exits or has finished the transition. A single name can be provided and it
230+
* will be suffixed for each stage: e.g.
227231
*
228-
* `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
229-
* `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
230-
* `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
232+
* `classNames="fade"` applies `fade-appear`, `fade-appear-active`,
233+
* `fade-appear-done`, `fade-enter`, `fade-enter-active`, `fade-enter-done`,
234+
* `fade-exit`, `fade-exit-active`, and `fade-exit-done`.
231235
*
232236
* **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
233237
* This allows you to define different behavior for when appearing is done and

src/Transition.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -409,11 +409,16 @@ Transition.propTypes = {
409409
unmountOnExit: PropTypes.bool,
410410

411411
/**
412-
* Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
413-
* If you want to transition on the first mount set `appear` to `true`, and the
414-
* component will transition in as soon as the `<Transition>` mounts.
412+
* Normally a component is not transitioned if it is shown when the
413+
* `<Transition>` component mounts. If you want to transition on the first
414+
* mount set `appear` to `true`, and the component will transition in as soon
415+
* as the `<Transition>` mounts.
415416
*
416-
* > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
417+
* > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
418+
* > only adds an additional enter transition. However, in the
419+
* > `<CSSTransition>` component that first enter transition does result in
420+
* > additional `.appear-*` classes, that way you can choose to style it
421+
* > differently.
417422
*/
418423
appear: PropTypes.bool,
419424

0 commit comments

Comments
 (0)