Spy not working after component unmount

[cfrancis-oo]

Hi,

I'm having a bit of an issue, I have 2 pages, both with multiple DirectLinks with spy active, but when switching between pages, the spy active state stops working.

I'll see if I can get a demo working

[fisshy]

Hi,

Does it stop working when you switch once or when you switch back?

[cfrancis-oo]

When I switch once

[cfrancis-oo]

I've just created a stripped down version, and I believe it's something to do with

<ReactCSSTransitionGroup transitionName="page" transitionEnterTimeout={700} transitionLeaveTimeout={700}> {cloneElement(this.props.children, { key: this.props.location.pathname })} </ReactCSSTransitionGroup>

Seeing if I can get it on CodePen

[cfrancis-oo]

main.js

import React, { Component, PropTypes, cloneElement } from 'react';
import ReactDOM from 'react-dom';
import { Link, IndexRoute, Route, Router, browserHistory } from 'react-router';
import { animateScroll, DirectLink  } from 'react-scroll';
import { StickyContainer, Sticky } from 'react-sticky';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import './app.scss';

class App extends Component {

  static propTypes = {
    children: PropTypes.node.isRequired,
    location: PropTypes.object.isRequired
  }

  render() {
    return (
      <div>
        <div>
          <Link to="/">
            Page One
          </Link>
          <Link to="/two">
            Page Two
          </Link>
        </div>
        <ReactCSSTransitionGroup transitionName="page" transitionEnterTimeout={700} transitionLeaveTimeout={700}>
          {cloneElement(this.props.children, { key: this.props.location.pathname })}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

class One extends Component {

  render() {
    return (
      <StickyContainer className="page-one">
        <h1>Page One</h1>
        <Sticky className="inner-nav">
          <div>
            <DirectLink className="direct-link" to="one" isDynamic spy smooth duration={500} offset={-50}>Direct Link 1</DirectLink>
            <DirectLink className="direct-link" to="two" isDynamic spy smooth duration={500} offset={-50}>Direct Link 2</DirectLink>
            <DirectLink className="direct-link" to="three" isDynamic spy smooth duration={500} offset={-50}>Direct Link 3</DirectLink>
          </div>
        </Sticky>
        <section id="one">
          <h1>Section One</h1>
        </section>
        <section id="two">
          <h1>Section Two</h1>
        </section>
        <section id="three">
          <h1>Section Three</h1>
        </section>
      </StickyContainer>
    );
  }
}

class Two extends Component {

  render() {
    return (
      <StickyContainer className="page-two">
        <h1>Page Two</h1>
        <Sticky className="inner-nav">
          <div>
            <DirectLink className="direct-link" to="one" isDynamic spy smooth duration={500} offset={-50}>Direct Link 1</DirectLink>
            <DirectLink className="direct-link" to="two" isDynamic spy smooth duration={500} offset={-50}>Direct Link 2</DirectLink>
            <DirectLink className="direct-link" to="three" isDynamic spy smooth duration={500} offset={-50}>Direct Link 3</DirectLink>
          </div>
        </Sticky>
        <section id="one">
          <h1>Section One</h1>
        </section>
        <section id="two">
          <h1>Section Two</h1>
        </section>
        <section id="three">
          <h1>Section Three</h1>
        </section>
      </StickyContainer>
    );
  }
}

ReactDOM.render((
  <Router onUpdate={() => animateScroll.scrollToTop({ duration: 500 })} history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={One} />
      <Route path="two" component={Two} />
    </Route>
  </Router>
), document.getElementById('app'));

app.scss

.inner-nav {
    background-color: yellow;
    z-index: 99;
    text-align: center;
}

.direct-link {
    display: inline-block;
    width: 25%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    cursor: hand;
}

section {
    padding-bottom: 100%;
}

.page {
    background-color: #FFFFFF;
    position: relative;
}
.page-enter {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    z-index: 10;
}

.page-enter.page-enter-active {
    transform: translateX(0%);
    transition: transform .7s ease;
}

.page-leave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    z-index: 1;
    opacity: 1;
}
.page-leave.page-leave-active {
    opacity: 0.01;
    transform: scale(.9);
    transition: opacity .7s ease, transform .7s ease;
}

.page-one {
    .direct-link {
        &:hover,
        &.active {
            background-color: red;
        }
    }
}

.page-two {
    .direct-link {
        &:hover,
        &.active {
            background-color: blue;
        }
    }
}

[fisshy]

Does it work without the transition component?

[cfrancis-oo]

Yes it works without the transition component, but I'd like to add in Page Transitions in my application as well as Scroll Spy