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
Post a Comment