Skip to content

Commit c7fba4e

Browse files
committed
Final doc tweaks.
1 parent 57f93ae commit c7fba4e

File tree

1 file changed

+18
-21
lines changed

1 file changed

+18
-21
lines changed

README.md

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -118,32 +118,29 @@ add a delay to the `enter` transition.
118118
the duration of the transition. In this case:
119119

120120
```javascript
121-
<ReactCSSTransitionReplace transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
121+
<ReactCSSTransitionReplace transitionName="fade-wait"
122+
transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
122123
```
123124

124125

125-
#### Disabling the height transition
126-
127-
If the `.*-height` class is not specified the change in container height will not be animated but rather
128-
jump to the height of the entering component instantaneously. While this is probably not a very useful
129-
scenario in practice, doing so does not break anything and still avoids absolute positioning related
130-
height issues.
131-
132-
133126
## Tips
134127

135-
- In general animating `block` or `inline-block` level elements is more stable that `inline` elements. If the
136-
height changes in random ways ensure that there isn't a `span` or other inline element used as the outer
137-
element of the components being animated.
138-
- The `overflow` of the container is set to `'hidden'` automatically, which changes the behaviour of
139-
[collapsing margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/) from the default
140-
`'visible'`. This may cause a glitch in the height at the start or end of animations. To avoid this you can:
141-
- Keep the overflow hidden permanently with custom styles/classes if there won't be adverse side-effects.
142-
- Only use
143-
[Single-direction margin declarations](http://csswizardry.com/2012/06/single-direction-margin-declarations/)
144-
to avoid any collapsing margins.
145-
- Turn this feature off by setting the `overflowHidden={false}` prop when hidden overflow is not needed,
146-
for example when transitions are in place and content is of the same height.
128+
1. In general animating `block` or `inline-block` level elements is more stable that `inline` elements. If the
129+
height changes in random ways ensure that there isn't a `span` or other inline element used as the outer
130+
element of the components being animated.
131+
2. The `overflow` of the container is set to `'hidden'` automatically, which changes the behaviour of
132+
[collapsing margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/) from the default
133+
`'visible'`. This may cause a glitch in the height at the start or end of animations. To avoid this you can:
134+
- Keep the overflow hidden permanently with custom styles/classes if that will not cause undesired side-effects.
135+
- Only use
136+
[Single-direction margin declarations](http://csswizardry.com/2012/06/single-direction-margin-declarations/)
137+
to avoid collapsing margins overall.
138+
- Turn this feature off by setting the `overflowHidden={false}` prop when hidden overflow is not needed,
139+
for example when transitions are in place and content is of the same height.
140+
3. If the `.*-height` class is not specified the change in container height will not be animated but instead
141+
jump to the height of the entering component instantaneously. It can, therefore, be omitted if all content
142+
is known to be of the same height without any adverse side-effects, and absolute positioning related height
143+
issues will still be avoided.
147144

148145

149146
## Contributing

0 commit comments

Comments
 (0)