@@ -118,32 +118,29 @@ add a delay to the `enter` transition.
118
118
the duration of the transition. In this case:
119
119
120
120
``` javascript
121
- < ReactCSSTransitionReplace transitionName= " fade-wait" transitionEnterTimeout= {1000 } transitionLeaveTimeout= {400 }>
121
+ < ReactCSSTransitionReplace transitionName= " fade-wait"
122
+ transitionEnterTimeout= {1000 } transitionLeaveTimeout= {400 }>
122
123
```
123
124
124
125
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
-
133
126
## Tips
134
127
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.
147
144
148
145
149
146
## Contributing
0 commit comments