TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 71 forks source link

with custom animation, enter callback never being called. old and new page both visible simultaneously #227

Closed jeffmagill closed 4 years ago

jeffmagill commented 4 years ago

I've got a custom link component that uses a custom animation. onExit is called and animates the old page content just fine. However, the new page content shows up immediately and the onEnter callback is never fired. What am I missing? How am I supposed to animate the new page in? How do I get the onEnter callback to fire?

class DropLink extends React.Component  {
    constructor(props) {
        super(props);
        this.collect = this.collect.bind(this);
        this.onEnter = this.onEnter.bind(this);
        this.onExit = this.onExit.bind(this);
    }

    onEnter() {
        console.log('On Enter');
    }

    onExit(node, event, exit, entry) {
        console.log('On Exit');
        let nodes = this.collect(node.node);
        this.drop(nodes)
    }

    collect(t = {}) { /* collecting nodes to animate */ }

    drop(nodes) { /* imperitive "dropping" animation */ }

    render() {
        return (
            <TransitionLink
                to={this.props.to}
                enter={{length: 1, trigger: this.onEnter}}
                exit={{length: 1, trigger: this.onExit}}
                >
                {this.props.children}
            </TransitionLink>
        );
    }
}

export default DropLink

My attempt at including an image of the problem: Image

jeffmagill commented 4 years ago

If its relevant, here are the omitted methods

    collect(t = {}) {
        if(t.children && t.children.length) {
            let results = [...t.children].flatMap(this.collect);
            return results;
        }
        else {
            return [ t ];
        }
    }

    drop(items) {
        items.forEach( (el, index) => setTimeout( () => { 
            if(index % 2 == 0) {
                el.classList.toggle('dropping--right');
            }
            el.classList.toggle('dropping')
        }, Math.random()*333));
    }
jeffmagill commented 4 years ago

Aaaand I'm a dummy because I had the prop as enter when it should be entry. Once again, I find the answer myself after publicly posting my question.