javascript - Why is react-transition-group not calling componentWillEnter nor componentWillLeave on route change? -
i following hackernoon guide https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a in order apply enter , leave animations react components when route changes. have adapted code fit site, , have decided not use animated rather pure css. right i'm testing code console.log statements, , noticed componentwillenter , componentwillleave not being called on route changes. also, componentwillappear gets called once.
here relevant code each component, including app.js , index.js:
animated wrapper:
import react, {component} "react"; import styles '../styles/animatedwrapper.css'; const animatedwrapper = wrappedcomponent => class animatedwrapper extends component { componentwillappear(cb) { console.log('componentwillappear'); cb(); } componentwillenter(cb) { console.log('componentwillenter'); cb(); } componentwillleave(cb) { console.log('componentwillleave'); cb(); } render() { return ( <div id="animated-wrapper" classname={styles.animatedpagewrapper}> <wrappedcomponent {...this.props}/> </div> );} }; export default animatedwrapper; app.js:
import react, { component } 'react'; import { route, switch } 'react-router-dom'; import transitiongroup "react-transition-group/transitiongroup"; import navbar "./components/navbar"; import footer "./components/footer"; import slider "./components/slider"; import comingsoon "./components/comingsoon"; const firstchild = props => { const childrenarray = react.children.toarray(props.children); return childrenarray[0] || null; } class app extends component { render() { return ( <div classname="app"> <navbar /> <switch> <route path="/coming-soon" children={({ match, ...rest }) => ( <transitiongroup component={firstchild}> {match && <comingsoon {...rest} />} </transitiongroup> )}/> <route path="/" children={({ match, ...rest }) => ( <transitiongroup component={firstchild}> {match && <slider {...rest} />} </transitiongroup> )}/> </switch> <footer /> </div> ); } } export default app; index.js:
import react 'react'; import reactdom 'react-dom'; import { browserrouter } 'react-router-dom'; import app './app'; import './index.css'; reactdom.render( <browserrouter> <app /> </browserrouter>, document.getelementbyid('root') ); slider.js:
import react, { component } 'react'; import _ 'lodash'; // components import animatedwrapper './animatedwrapper'; import separator './separator'; // styles import styles '../styles/slider.css'; // images import apartment "../../public/images/apartment.jpg"; import floor "../../public/images/floor.jpg"; import furniture "../../public/images/furniture.jpg"; import kitchen1 "../../public/images/kitchen.jpg"; import kitchen2 "../../public/images/kitchen-2.jpg"; class slidercomponent extends component { constructor(props) { super(props); this.state = { currentslide: 0, slides: [apartment, floor, furniture, kitchen1, kitchen2] }; } componentdidmount() { this.zoomanimation(); this.slidecontentanimation(); this.sliderinterval = setinterval(() => { if (this.state.currentslide === 4) { if (this.refs.slider) { this.setstate({ currentslide: 0 }); } } else { if (this.refs.slider) { this.setstate({ currentslide: this.state.currentslide + 1 }); } } }, 6000); } componentwillupdate() { const currentcontent = document.getelementbyid(`content-${this.state.currentslide}`); settimeout(() => { currentcontent.classlist.remove(`${styles.currentcontent}`); }, 1500); } componentdidupdate() { this.zoomanimation(); this.slidecontentanimation(); } setslide(number) { this.setstate({ currentslide: number }); } zoomanimation() { settimeout(() => { const currentslide = document.getelementbyid(`slide-${this.state.currentslide}`); currentslide.classlist.add(`${styles.slidezoom}`); }, 500); } slidecontentanimation() { settimeout(() => { const currentcontent = document.getelementbyid(`content-${this.state.currentslide}`); if (currentcontent) { currentcontent.classlist.add(`${styles.currentcontent}`); } }, 1500); } renderslides() { return this.state.slides.map((slide, index) => { const iscurrent = index === this.state.currentslide; const slidestyle = { backgroundimage: `url(${this.state.slides[index]})` } return ( <div id={`slide-${index}`} key={`slide-${index}`} classname={` ${styles.slide} ${iscurrent ? styles.currentslide : null} `} style={slidestyle} alt="slide"> <div id={`content-${index}`} key={`content-${index}`} classname={` ${styles.content} `}> <h1>{`we specialize in kitchens ${index}`}</h1> <separator containerwidth={720} circlewidth={5} circleheight={5} backgroundcolor="#fff" linewidth={350} linecolor="#fff" /> <div classname={`${styles['hvr-sweep-to-top']} ${styles.btn}`}> more information </div> </div> </div> ); }); } rendernavbar() { return ( <div classname={styles.slidernav}> {_.range(5).map((index) => { return ( <div key={index} onclick={() => this.setslide(index)} classname={this.state.currentslide === index ? styles.current : null}> </div> ) })} </div> ) } render() { return ( <div classname={styles.container} ref="slider"> <div classname={styles.slidescontainer}> {this.renderslides()} </div> {this.rendernavbar()} </div> ); } } const slider = animatedwrapper(slidercomponent); export default slider; comingsoon.js:
import react 'react'; import animatedwrapper './animatedwrapper'; import styles '../styles/comingsoon.css'; const comingsooncomponent = function() { return ( <div> <div classname={styles.maincontent}> <div> <h1 classname={styles.maintitle}>{`coming soon`}</h1> </div> </div> </div> ); }; const comingsoon = animatedwrapper(comingsooncomponent); export default comingsoon;
Comments
Post a Comment