reactjs - How to make page slide(change) with react-router -
i'v tried use react-router , reacttransitiongroup make navigation effect(page slide whereas route changes).
however, it's error-prone , ugly.(made logic define direction slide , remove/add classes make transition work).
i doubt there nice plugin use.
here's piece of code, inspired hardware-accelerated page transitions mobile web apps / phonegap apps.
const keyhistory = []; let dir = 0; const pagemixin = { componentwillappear(cb) { keyhistory.push(this.props.location.key); let $el = $(reactdom.finddomnode(this)); $el.addclass(pagestyles.right); $el.one('transitionend', () => { $el.removeclass(`${pagestyles.right} ${pagestyles.active}`); cb(); }); requestanimationframe(() => { $el.addclass(`${pagestyles.active} ${pagestyles.center}`); }); }, componentwillenter(cb) { let key = this.props.location.key, len = keyhistory.length; if (key === keyhistory[len - 2]) { keyhistory.pop(); dir = -1; } else { keyhistory.push(key); dir = 1; } const fromdir = dir === -1 ? pagestyles.left : pagestyles.right; let $el = $(reactdom.finddomnode(this)); $el.addclass(fromdir); requestanimationframe(() => { $el.removeclass(fromdir).addclass(`${pagestyles.active} ${pagestyles.center}`); }); $el.one('transitionend', () => { $el.removeclass(`${fromdir} ${pagestyles.active}`); cb(); }); }, componentwillleave(cb) { const todir = dir === -1 ? pagestyles.right : pagestyles.left; let $el = $(reactdom.finddomnode(this)); requestanimationframe(() => { $el.removeclass(pagestyles.center).addclass(`${pagestyles.active} ${todir}`); }); $el.one('transitionend', () => { $el.removeclass(pagestyles.active); cb(); }); } };
you can try
https://github.com/oliviertassinari/react-swipeable-views
partial code github
<swipeableviews> <div> slide 1 </div> <div> slide 2 </div> <div> slide 3 </div> </swipeableviews> 
Comments
Post a Comment