ReactJS Transitions - Why doesn't this work? -

i'd transition 1 element changes element.

i've got 3 examples:

• one works, uses list of items kept around (jsfiddle)
• one doesnt work, , keeps 1 item around, depending on state (jsfiddle)
• another 1 doesn't work, keeps both items around , hides/shows them (jsfiddle using hide/show)

what want more second one, slight variation of first attempt works.

option 1:

/** @jsx react.dom */  var reacttransitiongroup = react.addons.transitiongroup;  var todolist = react.createclass({   getinitialstate: function() {     return {items: ['hello', 'world', 'click', 'me']};   },   handleadd: function() {     var newitems =       this.state.items.concat([prompt('enter text')]);     this.setstate({items: newitems});   },   handleremove: function(i) {     var newitems = this.state.items;     newitems.splice(i, 1)     this.setstate({items: newitems});     },      render: function() {         var items = this.state.items.map(function(item, i) {             return (                 <div key={item} onclick={this.handleremove.bind(this, i)}>                     {item}                 </div>             );         }.bind(this));          return (             <div>                 <div><button onclick={this.handleadd} /></div>                 <reacttransitiongroup transitionname="example">                     {items}                 </reacttransitiongroup>             </div>         );     } });  var app = react.rendercomponent(<todolist />, document.body); 

option 2: jsx doesn't work, closer i'd (really, hide 1 view, , show another)

/** @jsx react.dom */  var reacttransitiongroup = react.addons.transitiongroup;  var test = react.createclass({   getinitialstate: function() {     return {showone:true}   },   onclick: function() {     this.setstate({showone:! this.state.showone});   },     render: function() {       var result;       if (this.state.showone)       {         result = <div ref="a">one</div>       }       else        {         result = <div ref="a">two</div>       }          return (             <div>                 <div><button onclick={this.onclick}>switch state</button></div>                 <reacttransitiongroup transitionname="example">                     {result}                 </reacttransitiongroup>             </div>         );     } });  var app = react.rendercomponent(<test />, document.body); 

option 3: uses hide/show keep 2 views around, still doesn't work.

/** @jsx react.dom */  var reacttransitiongroup = react.addons.transitiongroup;  var test = react.createclass({   getinitialstate: function() {     return {showone:true}   },   onclick: function() {     this.setstate({showone:! this.state.showone});   },     render: function() {       var result;       var c1 = this.state.showone ? "hide" : "show";       var c2 = this.state.showone ? "show" : "hide";         return (             <div>                 <div><button onclick={this.onclick}>switch state</button></div>                 <reacttransitiongroup transitionname="example">         <div classname={c1}>one</div>         <div classname={c2}>two</div>                 </reacttransitiongroup>             </div>         );     } });  var app = react.rendercomponent(<test />, document.body); 

so long story short - how can make transition execute on switching 1 main "component" another? don't why option 1 works, option 2 doesn't!

react changing content of dom because that's changed. give elements unique keys make them animate.

  if (this.state.showone)   {     result = <div key="one">one</div>   }   else    {     result = <div key="two">two</div>   } 

jsfiddle