diff --git a/README.markdown b/README.markdown index e8ea4d417..f80c12409 100644 --- a/README.markdown +++ b/README.markdown @@ -216,7 +216,7 @@ The element tags are the bread and butter of your slide content. Most of these t ####\ -This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation. The Appear tag requires adding `fid` tags that are unique within a given slide. This requirement will go away in React 0.14. +This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation. ####\
, \ and \ (Base) diff --git a/src/appear.jsx b/src/appear.jsx index b1423a7e7..4c6dbd906 100644 --- a/src/appear.jsx +++ b/src/appear.jsx @@ -21,15 +21,15 @@ const Appear = React.createClass({ }, componentDidMount() { this.context.flux.stores.SlideStore.listen(this._storeChange); - const slide = this.context.slide; }, componentWillUnmount() { this.context.flux.stores.SlideStore.unlisten(this._storeChange); }, _storeChange(state) { const slide = this.context.slide; + const fragment = React.findDOMNode(this.refs.fragment); const key = _.findKey(state.fragments[slide], { - "id": this.props.fid + "id": parseInt(fragment.dataset.fid) }); if (slide in state.fragments && state.fragments[slide].hasOwnProperty(key)) { this.setState({ @@ -52,7 +52,7 @@ const Appear = React.createClass({ opacity: this.getTweeningValue("opacity") }; return ( -
+
{this.props.children}
); diff --git a/src/slide.jsx b/src/slide.jsx index 5a4b98644..58e3a61f1 100644 --- a/src/slide.jsx +++ b/src/slide.jsx @@ -20,7 +20,8 @@ const Slide = React.createClass({ align: React.PropTypes.string, presenterStyle: React.PropTypes.object, children: React.PropTypes.node, - notes: React.PropTypes.string + notes: React.PropTypes.string, + slideIndex: React.PropTypes.number }, contextTypes: { styles: React.PropTypes.object, @@ -51,13 +52,14 @@ const Slide = React.createClass({ const slide = React.findDOMNode(this.refs.slide); const frags = slide.querySelectorAll(".fragment"); if (frags && frags.length) { - Array.prototype.slice.call(frags, 0).forEach((frag) => { + Array.prototype.slice.call(frags, 0).forEach((frag, i) => { + frag.dataset.fid = i; this.context.flux.actions.SlideActions.addFragment({ slide: this.props.slideIndex, - id: frag.dataset.fid, + id: i, visible: false }); - }) + }); } window.addEventListener("load", this.setZoom); window.addEventListener("resize", this.setZoom);