反応ルータでページスライドを作成する方法（変更）

Question

反応ルータとReactTransitionGroupを使用してナビゲーションエフェクトを作成しようとしました。

しかし、エラーが発生しやすく、醜いです（過渡的な作業をするためにクラスに移動し、クラスを削除/追加する方向を定義するロジックを大いにしました）。

すてきなプラグインがあります。

ここには、Hardware-Accelerated Page Transitions for 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(); 
     }); 
    } 
}; 

Answer 1

あなたはhttps://github.com/doctolib/react-router-transitionsを見た興味がある可能性githubの

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

Answer 2

からこの

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

部分のコードを試すことができます。 このプラグインはトランジションのロジック部分を処理します。

あなたはまだあなたの側で実際の移行を処理する必要があります。例えば。 ReactTransitionGroupを使用してください。

Answer 3

他のパッケージなしで、反応-ルータ右Here

次のようになりReactCSSTransitionGroupの使用例での素敵な例があります、後半ABITに来るけど：スライドの

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

ます

.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; 
 
}

： Sliding React Componentsに示す方法を使用することができ