老师帮忙看下，就是刷新了后就直接进入init，没有转换done

老师帮忙看下，就是刷新了后就直接进入init，没有转换done

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业项目</title>
    <link rel="stylesheet" href="./css/test.css">
    <link rel="stylesheet" href="./css/animates.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
    <div class="header__wrap">
        <div class="header__logo">H5实战页面</div>
        <nav class="header__nav">
            <a href="javascript:;" class="header__nav-item header__nav-item_status_active">实战课程</a>
            <a href="javascript:;" class="header__nav-item">商业案例</a>
            <a href="javascript:;" class="header__nav-item">课程体系</a>
            <a href="javascript:;" class="header__nav-item">集成环境</a>
            <a href="javascript:;" class="header__nav-item">云端学习</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">即刻学习</a>
        </nav>
    </div>
</header>
<!-- 动画屏 -->
<div class="screen-1">
    <div class="screen-1__box">
    <h2 class="screen-1__heading">实战课程重磅上线</h2>
    <h3 class="screen-1__subheading">一键云学习，还在等什么？</h3>
    </div>
</div>
<div class="screen-2">
    <div class="screen-2__wrap">
        <h2 class="screen-2__heading">每门课都是真实商业案例</h2>
        <div class="line"></div>
        <h3 class="screen-2__subheading">真实案例，真实场景，在实战中实践、操作、调试<br/>大牛带你体检BAT真实开发流程，所有开发过程——为你呈现</h3>
        <div class="screen-2__bg"></div>
        <div class="screen-2__bg2"></div>
        <div class="screen-2__bg3"></div>
    </div>
</div>
<div class="screen-3">
    <div class="screen-3__wrap">
        <div class="screen-3__bg"></div>
        <div class="screen-3__box">
            <h2 class="screen-3__heading">强大的语言课程体系支持</h2>
            <div class="line"></div>
            <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</h3>
            <div class="screen-3__lang">
                <div class="screen-3__lang-item screen-3__lang_i_1">
                    <div class="screen-3__lang-item-desc">HTML5</div>
                </div>
            </div>
            <div class="screen-3__lang">
                <div class="screen-3__lang-item screen-3__lang_i_2">
                    <div class="screen-3__lang-item-desc">PHP</div>
                </div>
            </div>
            <div class="screen-3__lang">
                <div class="screen-3__lang-item screen-3__lang_i_3">
                    <div class="screen-3__lang-item-desc">JAVA</div>
                </div>
            </div>
            <div class="screen-3__lang">
                <div class="screen-3__lang-item screen-3__lang_i_4">
                    <div class="screen-3__lang-item-desc">Python</div>
                </div>
            </div>
            <div class="screen-3__lang">
                <div class="screen-3__lang-item screen-3__lang_i_5">
                    <div class="screen-3__lang-item-desc">Node.js</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="screen-4">
    <div class="screen-4__wrap">
        <div class="screen-4__box">
            <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2>
            <div class="line"></div>
            <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
        </div>
        <div class="screen-4__bg">
            <div class="screen-4__bg__item screen-4__bg__item_i_1">       
                <div class="screen-4__bg__item__desc">实战课程集成开发环境</div>
            </div>
            <div class="screen-4__bg__item screen-4__bg__item_i_2">            
                <div class="screen-4__bg__item__desc">内置终端命令行</div>
            </div>
            <div class="screen-4__bg__item screen-4__bg__item_i_3">       
                <div class="screen-4__bg__item__desc">编译你的应用程序</div>
            </div>
            <div class="screen-4__bg__item screen-4__bg__item_i_4">              
                <div class="screen-4__bg__item__desc">通过云端服务输出效果</div>
            </div>
        </div>
    </div>
</div>
<div class="screen-5">
    <div class="screen-5__wrap">
        <div class="screen-5__box">
            <div class="screen-5__bg"></div>
            <h2 class="screen-5__heading">云端学习可以这样简单</h2>
            <div class="line"></div>
            <h3 class="screen-5__subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样</h3>
        </div>
    </div>
</div>
<div class="screen-6">
    <button type="button">继续了解学习体检</button>
</div>
<!-- 页脚 -->
<footer class="footer">
    <div class="footer__desc">
        <a href="javascript:;" class="footer__desc-item">网站首页</a>
        <a href="javascript:;" class="footer__desc-item">人才招聘</a>
        <a href="javascript:;" class="footer__desc-item">联系我们</a>
        <a href="javascript:;" class="footer__desc-item">高校联盟</a>
        <a href="javascript:;" class="footer__desc-item">关于我们</a>
        <a href="javascript:;" class="footer__desc-item">讲师招募</a>
        <a href="javascript:;" class="footer__desc-item">意见反馈</a>
        <a href="javascript:;" class="footer__desc-item">友情链接</a>
    </div>
    <div class="footer__copy">©&nbsp;2016&nbsp;imooc.com&nbsp;京ICP备13046642号</div>
</footer>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
*{margin: 0;padding: 0;}
a{
    text-decoration: none;
}
h2{
    font-size: 40px;
}
h3{font-weight: normal;font-size: 18px;}
.line{
    border: 1px solid #f00;
    width: 40px;
    margin: 20px auto;
}
/* 导航区 */
.header{
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.header__wrap{
    width: 100%;
    height: 60px;
    position: relative;
    margin: 0 auto;
}
.header__logo{
    width: 190px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    color: #fff;
    background: url('../img/logo.png') left center no-repeat;
    text-indent: 50px;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    left: 20px;
}
.header__nav{
    position: absolute;
    right: 20px;
    height: 38px;
    line-height: 38px;
    top: 50%;
    margin-top: -19px;
    cursor: pointer;
}
.header__nav-item{
    color: #fff;
    font-size: 16px;
    display: block;
    height: 38px;
    line-height: 38px;
    width: auto;
    text-align: center;
    float: left;
    padding-left: 30px;
}
.header__nav-item_custom_button{
    background: #f00;
    width: 90px;
    border-radius: 5px;
    padding: 0;
    margin-left: 40px;
}
.header__nav-item_status_active{
    color: red;
}

/* 第一屏 */
.screen-1{
    position: relative;
    background: url('../img/sc1.jpg') no-repeat center;
    background-size: cover;
    overflow: hidden;
    height: 640px;  
}
.screen-1__box{
    width: 1200px;
    height: 120px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -600px;
    margin-top: -60px;
    color: #fff;
}
.screen-1__heading{
    margin-bottom: 30px;
}
.screen-2{
    position: relative;
    background-color: #fff;
    height: 640px;  
    overflow: hidden;
}
.screen-2__wrap{
    width: 1200px;
    height: 640px;
    text-align: center;
    margin: 0 auto;
}
.screen-2__heading{
    margin-top: 70px;
}
.screen-2__bg{
    background: url(../img/sc2.png) no-repeat center;
    width: 750px;
    height: 361px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -375px;
}
.screen-2__bg2{
    background: url(../img/sc2-1.png) no-repeat center;
    width: 275px;
    height: 380px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -138px;
    z-index: 2;
}
.screen-2__bg3{
    background: url(../img/sc2-2.png) no-repeat center;
    width: 266px;
    height: 205px;
    position: absolute;
    bottom: 108px;
    left: 790px;
    margin-left: -138px;
    z-index: 1;
}

/*第三屏  */
.screen-3{
    /* position: relative; */
    background-color:rgb(43, 51, 59);
    height: 640px; 
    overflow: hidden; 
}
.screen-3__wrap{
    width: 1200px;
    height: 640px;
    position: relative;
    margin: 0 auto;;
}
.screen-3__bg{
    background: url(../img/sc3.png) no-repeat center;
    width: 308px;
    height: 340px;
    position: absolute;
    transform: scale(1.5);
    left: 81px;
    top: 50%;
    margin-top: -170px;
}
.screen-3__box{
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -70px;
    color: #fff;
}
.screen-3 > .screen-3__wrap > .screen-3__box > .line{
    display: inline-block;
}
.screen-3__lang{
    float: left;
    margin-top: 110px;
}
.screen-3__lang-item{
    text-align: center;
    width: 74px;
    height: 74px;
    line-height: 74px;
    border: 6px solid;
    border-radius: 50%;
    margin-left: 30px;
}
.screen-3__lang_i_1{
    margin-left: 15px;
    color: rgb(31, 89, 117);
}
.screen-3__lang_i_2{
    color: rgb(66, 77, 118);
}
.screen-3__lang_i_3{
    color: rgb(107, 65, 70);
}
.screen-3__lang_i_4{
    color: rgb(41, 83, 95);
}
.screen-3__lang_i_5{
    color: rgb(62, 78, 64);
}

/* 第四屏 */
.screen-4{
    background-color:#fff;
    height: 640px; 
}
.screen-4__wrap{
    width: 1200px;
    height: 640px;
    position: relative;
    margin: 0 auto;
}
.screen-4__box{
    width: 440px;
    height: 118px;
    text-align: center;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -220px;
}
.screen-4__bg{
    width: 1200px;
    height: 130px;
    position: absolute;
    top: 320px;
}
.screen-4__bg__item{
    float: left;
    width: 180px;
    height: 85px;
    text-align: center;
    margin-left: 95px;
    position: relative;
}
.screen-4__bg__item__desc{
    width: 100%;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    position: absolute;
    bottom: -40px;
}
.screen-4__bg__item_i_1{
    background: url('../img/sc4-1.png')no-repeat center;
}
.screen-4__bg__item_i_2{
    background: url('../img/sc4-2.png')no-repeat center;
}
.screen-4__bg__item_i_3{
    background: url('../img/sc4-3.png')no-repeat center;
}
.screen-4__bg__item_i_4{
    background: url('../img/sc4-4.png')no-repeat center;
}

/* 第五屏 */
.screen-5{
    background: url('../img/sc5.jpg')no-repeat center;
    background-size: cover;
    overflow: hidden;
    height: 640px; 
}
.screen-5__wrap{
    width: 1200px;
    height: 640px;
    position: relative;
    margin: 0 auto;
}
.screen-5__box{
    width: 1200px;
    height: 400px;
    text-align: center;
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -600px;
    color: #fff;
}
.screen-5__bg{
    background: url(../img/sc5-1.png)no-repeat center;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 35px;
}
/* 第六屏 */
.screen-6{
    background-color: #fff;
    width: 100%;
    height: 150px;
    position: relative;
}
.screen-6 > button{
    width: 190px;
    height: 50px;
    line-height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -95px;
    background: transparent;
    border: 1px solid rgb(149, 149, 149);
    border-radius: 3px;
    font-size: 18px;
}

/* 页脚 */
.footer{
    width: 100%;
    height: 100px;
    background: black;
    color: #fff;
    text-align: center;
    position: relative;
}
.footer__desc{
    width: 1200px;
    height: 38px;
    line-height: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -38px;
    margin-left: -600px;
  
}
.footer__desc-item{
    padding-left: 30px;
    display: inline-block;
    color: #fff;
}
.footer__copy{
    height: 38px;
    width: 300px;
    line-height: 38px;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -10px;
}

.screen-1__heading{
    transition: all 1s;
}
.screen-1__subheading{
    transition: all 2s;
}
.screen-1__heading_animate_init,
.screen-1__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}


.screen-2__heading{
    transition: all 1s;
}
.screen-2__heading_animate_init{
    opacity: 0;
    transform: translate(100%,0);
}
.screen-2__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
//获取元素
var getElem = function(selector){
    return document.querySelector(selector);
}
var getAllElem = function(selector){
    return document.querySelectorAll(selector);
}

//获取元素样式
var getCls = function(element){
    return element.getAttribute('class');
}
//设置元素样式
var setCls = function(element,cls){
    return element.setAttribute('class',cls);
}

//为元素添加样式
var addCls = function(element,cls){
    var baseCls = getCls(element);
    if(baseCls.indexOf(cls)===-1){
        setCls(element,baseCls+' '+cls);
    }
}
//为元素删除样式
var delCls = function(element,cls){
    var baseCls = getCls(element);
    if(baseCls.indexOf(cls)!=-1){
        setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,''));
    }
}


//第一步：初始化样式
var screenAnimateElements = {
    '.screen-1':[
        '.screen-1__heading',
        '.screen-1__subheading',
    ],
    '.screen-2':[
        '.screen-2__heading',
        '.screen-2__subheading',
        '.line',
        '.screen-2__bg2',
        '.screen-2__bg3',
    ],
    '.screen-3':[
        '.screen-3__heading',
        '.screen-3__subheading',
        '.line',
        '.screen-3__bg',
        '.screen-3__lang',
    ],
    '.screen-4':[
        '.screen-4__heading',
        '.screen-4__subheading',
        '.line',
        '.screen-4__bg',
    ],
    '.screen-5':[
        '.screen-5__heading',
        '.screen-5__subheading',
        '.line',
        '.screen-5__bg',
    ],
}
// //设置屏内元素为初始状态
// var setScreenAnimateInit = function(screenCls){
//     // var screen = document.querySelector(screenCls);//获取当前屏的元素
//     var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
//     for(var i=0;i<animateElements.length;i++){
//         var element = document.querySelector(animateElements[i]);
//         var baseCls = element.getAttribute('class');
//         element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
//     }
// }
// //设置播放屏内的元素动画
// var playScreenAnimateDone = function(screenCls){
//     // var screen = document.querySelector(screenCls);//获取当前屏的元素
//     var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
//     for(var i=0;i<animateElements.length;i++){
//         var element = document.querySelector(animateElements[i]);
//         var baseCls = element.getAttribute('class');
//         element.setAttribute('class',baseCls.replace('_animate__init','_animate_done'));
//     }
// }
//设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
    // var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素

    for(var i=0;i<animateElements.length;i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
    }
}
//设置播放屏内的元素动画
var playScreenAnimateDone = function(screenCls){
    // var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素

    for(var i=0;i<animateElements.length;i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
    }
}
window.onload = function(){
    for(k in screenAnimateElements){
        // if(k==='.screen-1'){
        //     continue;
        // }
        setScreenAnimateInit(k);
    }
}
var navTip = getElem('.header__nav-tip');
var navItems = getAllElem('.header__nav-item');
var outLineItems = getAllElem('.outline__item');
var switchNavItemsActive = function(idx){
    for(var i=0;i<navItems.length;i++){
        delCls
    }
}
//第二步：滚动的到哪里，就播放哪里
window.onscroll = function(){
    var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if(top>1){
        playScreenAnimateDone('.screen-1');
    }
    if(top>640*1-100){
        playScreenAnimateDone('.screen-2');
    }
    if(top>640*2-100){
        playScreenAnimateDone('.screen-3');
    }
    if(top>640*3-100){
        playScreenAnimateDone('.screen-4');
    }
    if(top>640*4-100){
        playScreenAnimateDone('.screen-5');
    }
    
}


setTimeout(function(){
    playScreenAnimateDone('.screen-1');
},200)
xiao肥瑞 2020-09-08
源自：宣传页项目   5-6 作业题
20
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕夭夭 2020-09-10 09:38:05

同学你好，老师只是说可以从init切换到done, 但是效果是不正常的，建议同学再认真看一下回复，老师有说哦：

因为定时器调用了done方法，所以不到1秒，就会从init转换为done，这个过程是非常快的，所以元素还没有来得及隐藏就显示了。

http://img1.sycdn.imooc.com//climg/5f59825d0957415b07800102.jpg

而且也说了把window.onload去掉，这样效果就正常了。

http://img1.sycdn.imooc.com//climg/5f5982e0095bd3df08890126.jpg

祝学习愉快~

0
收起回答
好帮手慕夭夭 2020-09-09 09:56:20

同学你好，老师这边测试，和同学描述的不一致。刷新的时候，会从init转换为done，如下：

http://img1.sycdn.imooc.com//climg/5f58350c09ee780d08120138.jpg

代码中在定时器中，调用了done相关的函数，所以页面打开时，不到1秒，就会从init转换为done。这个过程很快，所以元素还没有来得及隐藏就开始显示了。

http://img1.sycdn.imooc.com//climg/5f58354e0999585804740091.jpg

不要让init初始化样式在页面加载后再去执行，不然会有一个从显示到隐藏的过程，导致元素还没有隐藏，就开始执行done显示了。建议把如下 window.onload 去掉，这样初始化样式在页面打开时瞬间就隐藏了。看不到从显示到隐藏的过程了。

http://img1.sycdn.imooc.com//climg/5f58359e0935be6404390171.jpg

可以修改测试一下，如果说的不是这个问题，请同学详细描述一下，以便老师准确高效的为你解答。

祝学习愉快~


0
收起回答
  • 提问者 xiao肥瑞 #1
    那为什么老师用window.onload就完全可以运行，为啥子我这里运行就导致元素没有办法隐藏啊？
    2020-09-09 20:02:22
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

项目打包后进入到路由页面再刷新页面就找不到了
43 0 10
没有return会有什么影响吗？（3个）
35 0 5
为什么执行后页面刷新不了，不能刷新下重新执行？
0 0 4
老师，有一个报错
10 0 3
第一次打完血量，再刷新就打不了了
30 0 4

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师