Wie man Seitenfolie (ändern) mit react-Router

Question

Ich habe versucht, react-Router und ReactTransitionGroup zu verwenden, um einen Navigationseffekt (Seite Folie, während Route ändert).

Es ist jedoch fehleranfällig und hässlich. (Viel Logik gemacht, um zu definieren, in welche Richtung zu schieben und Klassen zu entfernen/hinzufügen, um den Übergang zu machen).

Ich bezweifle, es gibt ein nettes Plugin zu verwenden.

Hier ist ein Stück meines Codes, der von Hardware-Accelerated Page Transitions for Mobile Web Apps/PhoneGap Apps inspiriert wurde.

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(); 
     }); 
    } 
}; 

Answer 1

können Sie diese versuchen

https://github.com/oliviertassinari/react-swipeable-views

Teilcode von Github

<SwipeableViews> 
    <div> 
     slide 1 
    </div> 
    <div> 
     slide 2 
    </div> 
    <div> 
     slide 3 
    </div> 
    </SwipeableViews> 

Answer 2

Sie einen Blick auf https://github.com/doctolib/react-router-transitions interessiert sein könnte mit. Dieses Plugin behandelt den Logikteil des Übergangs.

Sie müssten immer noch den tatsächlichen Übergang auf Ihrer Seite behandeln. Z.B. unter Verwendung von ReactTransitionGroup.

Answer 3

in abit kommt spät, aber ohne irgendwelche anderen Pakete, gibt es ein schönes Beispiel in den Beispielen reagieren-Router rechts Here

ReactCSSTransitionGroup Verwendung würde wie folgt aussehen:

<ReactCSSTransitionGroup 
    component="div" 
    transitionName={ location.action !== 'POP' ? 'slide': 'slide-back' } 
    transitionEnterTimeout={1000} 
    transitionLeaveTimeout={1000}> 
     {React.cloneElement(children, { key: location.pathname })} 
</ReactCSSTransitionGroup> 

für die Folie, die Sie

.slide-enter { 
 
    transform: translate(100%); 
 
} 
 
.slide-enter.slide-enter-active { 
 
    transform: translate(0%); 
 
    transition: transform 1000ms ease-in-out; 
 
} 
 
.slide-leave { 
 
    transform: translate(0%); 
 
} 
 
.slide-leave.slide-leave-active { 
 
    transform: translate(-100%); 
 
    transition: transform 1000ms ease-in-out; 
 
} 
 

 
.slide-back-enter{ 
 
    transform: translate(-100%); 
 
} 
 

 
.slide-back-enter.bg-back-enter-active { 
 
    transform: translate(0%); 
 
    transition: transform 1000ms ease-in-out; 
 
} 
 
.slide-back-leave { 
 
    transform: translate(0%); 
 
} 
 
.slide-back-leave.bg-back-leave-active { 
 
    transform: translate(0%); 
 
    transition: transform 1000ms ease-in-out; 
 
}

: kann das Verfahren in Sliding React Components gezeigt verwenden