路由切换动画

Question

我想实现类似iOS 那样左进右出的页面切换效果，请问改什么弄，css样式改什么写 ，

以下是我的代码 ，现实了push 的动画，返回时的动画和push动画一样（这不是我想要的），请指正

class Add extends Component {


   render() {
       console.log('app:' + this.props.location.pathname)
       return (
           <ReactCSSTransitionGroup
               component="div"
               className="react-container"
               transitionName="slide-in"
               transitionEnterTimeout={300}
               transitionLeaveTimeout={300}>
               <div key={this.props.location.pathname} className={this.props.location.pathname}>
                   {this.props.children}
               </div>
           </ReactCSSTransitionGroup>
       )
   }



}
export default withRouter(Add)

/***********************css部分**********************/

.slide-in-enter,
.slide-in-leave {
   -webkit-transition: all 300ms;
   transition: all 300ms;
}

.slide-in-enter { /* begin **/
   opacity: 0.01;
   margin-left: 128px;
}

.slide-in-enter.slide-in-enter-active { /* finish **/
   opacity: 1;
   margin-left: 0;
}

.slide-in-leave {
   opacity: 1;
   margin-left: 0;

}

.slide-in-leave.slide-in-leave-active {
   opacity: 0.01;
   margin-left: -128px;
}

.animateslide-in {
   display: block;
   height: 128px;
   position: relative;
   width: 384px;
}

.animateItem {
   color: white;
   font-size: 36px;
   font-weight: bold;
   height: 128px;
   line-height: 128px;
   position: absolute;
   text-align: center;
   -webkit-transition: all 300ms; /* TODO: make this a move animation */
   transition: all 300ms; /* TODO: make this a move animation */
   width: 128px;
}

Answer 1

吕小鸣 2018-09-05 17:46:22

你好：

1.关于ReactCSSTransitionGroup的使用，课程里面是没有用到这个组件哦。

2.关于您的问题，在使用ReactCSSTransitionGroup时如果想要实现类似iOS的客户端效果是需要自己定制切入和切出的class哦，您写的代码里的.slide-in使用的是透明度opacity的变换来达到切换效果，如果想要实现iOS切换效果，需要增加translateX来实现位移。

3. 代码的改动可以参考这2个文档：https://reactjs.org/docs/animation.html

https://segmentfault.com/a/1190000009687861

4. 最后还是建议您如果想要实现原生的iOS切换效果，不如直接使用课程中的多开webview来实现，效果比使用css实现更好哦。

• 提问者 宝慕林3443678 #1

  你说“多开webview来实现” ，课程那部分有讲到？求推荐一遍博客来了解一下。

• 提问者 宝慕林3443678 #2

  还是没有变化，是不是我的css写得有问题，我追加了给的css代码，求完整的css代码

• 吕小鸣 回复 提问者 宝慕林3443678 #3

  课程后面会有讲解采用jsbridge的方式打开一个iOS的webview来实现页面之间的切换。
  在多开webview页面的项目中，每打开一个webview相当于新开一个页面，采用这种方式可以保留上一个页面的所有状态，这样在从打开的页面返回时，能够做到更好的用户体验(无闪白，动画流畅)，比单纯的采用dom操作来模拟页面切换效果是要好很多哦

点开查看后面3条评论