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