Split {{ in example code to avoid an Exception in jekyll.
> Liquid Exception: Variable '{{' was not properly terminated with regexp: /\}\}/ in docs/10.1-animation.md
As discussed in issue 1326
(https://github.com/facebook/react/issues/1326) transitionend events are
unreliable; they may not fire because the element is no longer painted,
the browser tab is no longer focused or for a range of other reasons.
This is particularly harmful during leave transitions since the leaving
element will be permanently stuck in the DOM (and possibly visible).
The ReactCSSTransitionGroup now requires timeouts to be passed in
explicitly for each type of animation. Omitting the timeout duration
for a transition now triggers a PropTypes warning with a link to the
updated documentation.
When animating the max-height property in Safari, entering the leave state would trigger an animation to `max-height: 0`. Then when the active state kicked in, it would jump and didn't really look right. Moving the `transition` css property to the active version fixed the issue for me and worked on Safari, Chrome and Firefox. Unfortunately I'm not in a position to test in IE at the moment, but I'll do that at my first convenience tomorrow.
Update to the animation documentation for ReactTransitionGroup to clear the air on where one can use it.
If someone tries to use it off of React.addons.ReactTransitionGroup, which is undefined, instead of its real location, React.addons.TransitionGroup, they get a vague error about being unable to set defaultProps of undefined in the React createElement body.
I kept some places intact (search for @jsx) because they require other bigger changes:
- ref-01-top-level-api.md
- grunt/tasks/npm.js
- old blog posts (don't change those)
- examples/ folder, as they have their own package.json that rely on old dependencies (node-jsx, reactify) that haven't upgraded to 0.12
Add note about ReactTransitionGroup, that any additional, user-defined, properties will be become properties of the rendered component.
And example how to render a `<ul>` with css class.
The reason I chose to submit this is because it was initially unclear from the docs that the transition group needed to already be mounted in order for it to work properly.
When I first read these docs, it was not immediately clear to me that I could
use `React.addons.CSSTransitionGroup` to animate a single item coming into view,
or an item replacing an item already there. This was partly due to the example
which rendered a list of items.
This PR adds a blurb about being able to use
`React.addons.CSSTransitionGroup` with one or zero items, provides a code
example, and adds a note blockquote that a `key` attribute must always be
provided on each child of `React.addons.CSSTransitionGroup`. The latter point
was not immediately obvious from the original `TodoList` code example, since it
renders a list which would normally require `key` attributes anyway.
Test Plan:
- Refreshed `http://localhost:4000/react/docs/animation.html`, saw that the
docs additions rendered correctly.
- Example code not tested (it was extracted from working code).
- Overview of add-ons for the add-ons page.
- Better title for `ReactLink`.
- Nicer code format for classSet example.
- Better explanation for `classSet`.
Baraa Hamodi
Ben Alpert
Matt
iamchenxin
Paolo Moretti
Leon Yip
Daniel Rodgers-Pryor
Victor Alvarez
Kohei TAKATA
alexpien
Julen Ruiz Aizpuru
David Neubauer
Tsung Hung
alexpien
Bob Renwick
Paul Harper
G. Kay Lee
Mark Funk
Cheng Lou
Sebastian Markbage
Paul O’Shannessy
Benjamin Leiken
Sergey Generalov
Chris Sciolla
David Hu
Ben Alpert
Stefan Dombrowski
Daryl Lau
petehunt