使用js制作页面切换动画

先来个效果图

---

再贴代码...
此处使用vue的方式写，如使用其它框架，按思路修改即可。

<template>
    <div class="all" @touchstart.stop.prevent="touchstart" @touchmove.stop.prevent="touchmove" @touchend.stop.prevent="touchend">
        <div class="top" ref='login'>
            登陆
        </div>
        <div class="bottom" ref="reg">
            注册
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            clientHeight:document.body.clientHeight,//屏幕高度
            startclientY:0,//开始点击的高度
            clientMove:0,//移动距离
            nextPage:true,//当前页面
        }
    },
    methods:{
        touchstart(e){
            this.startclientY = e.touches[0].clientY;//Y
        },
        touchmove(e){
            this.clientMove = this.startclientY-e.touches[0].clientY;//计算移动距离
                //跟随鼠标移动页面
            if(this.nextPage){
                this.$refs.reg.style.top = this.clientHeight-this.clientMove+'px';
            }else{
                this.$refs.login.style.top = this.clientHeight-this.clientMove+'px';
            }
        },
        touchend(e){
            if(this.clientMove>=50){//移动距离超过50px
                if(this.nextPage){
                    //添加动画
                    this.$refs.reg.className = 'bottom go_top';
                    setTimeout(()=>{
                        this.$refs.reg.className = 'bottom go_top1';
                    },600);
                    //动画执行结束，修改底部页面位置
                    setTimeout(()=>{
                        this.$refs.login.className = 'top';
                        this.$refs.login.style.top = this.clientHeight+'px';
                        this.$refs.login.style.zIndex = 2;
                        this.nextPage = !this.nextPage;
                    },1100);
                }else{
                    this.$refs.login.className = 'top go_top';
                    setTimeout(()=>{
                        this.$refs.login.className = 'top go_top1';
                    },600);
                    setTimeout(()=>{
                        this.$refs.reg.className = 'bottom';
                        this.$refs.reg.style.top = this.clientHeight+'px';
                        this.$refs.login.style.zIndex = 0;
                        this.nextPage = !this.nextPage;
                    },1100);
                }
            }else{
                //复原
                if(this.nextPage){
                    this.$refs.reg.style.top = this.clientHeight+'px';
                    this.$refs.login.style.top = '0px';
                }else{
                    this.$refs.login.style.top = this.clientHeight+'px';
                    this.$refs.reg.style.top = '0px';
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/reset.scss";
.all{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.top{
    background: #FDDB43;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
}
.bottom{
    background: #00AA9A;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 100vh;
}
.go_top{
    animation: goTop .6s ease-in forwards;
    animation-timing-function: cubic-bezier(.4, .2, .9, .6);
}
.go_top1{
    animation: goTop1 .5s linear forwards;
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1);
}
@keyframes goTop{
    100%{top:0;}
}
@keyframes goTop1{
    0%{top: 0;}
    30%{top: 30px;}
    60%{top:5px;}
    80%{top: 15px;}
    100%{top:0;}
}
</style>