reactjs - React Transition group not firing -


i tried create simple transition react transition group, can't work- transitions aren't working. did used unique key.

for example did simple 2 image fade in fade out component:

var reactcsstransitiongroup = react.addons.transitiongroup;  var image = react.createclass({      getinitialstate: function () {           return ({imglink: 'http://belaumi.com/wp-content/uploads/2014/11/3d-animated-frog-image.jpg', status: 1})     },      update: function () {          console.log(this);         if (this.state.status==1)         {             this.setstate({ imglink: 'http://www.codefuture.co.uk/projects/imagehost/demo/di/kxy1/image-b%c3%a9b%c3%a9-facebook-8.jpg', status:2})          } else {              this.setstate({ imglink: 'http://belaumi.com/wp-content/uploads/2014/11/3d-animated-frog-image.jpg', status:1})         }     } ,       render: function ()  {          return (       <div>           <div classname='container'>           <button onclick={this.update.bind(this)}>click</button>             <reactcsstransitiongroup transitionname="example">           <img key={this.state.status} src={this.state.imglink}/>         </reactcsstransitiongroup>         </div>       </div>     );   }     });      react.render(         <div>             <image/>         </div>,         document.getelementbyid('reactbody')     )  </script> 

i've included proper css:

.example-enter {     opacity: 0.01;     transition: opacity .5s ease-in;     -webkit-transition: opacity .5s ease-in; } .example-enter.example-enter-active {     opacity: 1; }  .example-leave {     opacity: 1;     transition: opacity .5s ease-in;     -webkit-transition: opacity .5s ease-in; } .example-leave.example-leave-active {     opacity: 0.01; } 

any idea why not working? image switch, no fade..

thanks!

the addons name csstransitiongroup:

var reactcsstransitiongroup = react.addons.csstransitiongroup; 

instead of

var reactcsstransitiongroup = react.addons.transitiongroup; 

(notice csstransitiongroup)

working jsfiddle: http://jsfiddle.net/wvt30ocx/


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -