请问为什么我的phone和shadow的init 不变done啊

请问为什么我的phone和shadow的init 不变done啊

只有heading的init会变done，我和源码对了一下，没错啊

var setScreenAnimateElements = {
  ".screen-1": [".screen-1__heading", ".screen-1__phone", ".screen-1__shadow"]
};

function setScreenAnimate(screenCls) {
  var screen = document.querySelector(screenCls); //获取当前屏的元素
  var animateElements = setScreenAnimateElements[screenCls]; //需要设置动画的元素
  var isSetAnimateClass = false; //是否有初始化子元素的样式?
  var isAnimateDone = false; //当前屏幕下所有子元素状态是Done么？
  screen.onclick = function() {
    //初始化样式，增加init A A_init
    if (isSetAnimateClass === false) {
      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"
        );
      }
      isSetAnimateClass = true;
      return;
    }
    //切换所有 animateElements 的 init → done A A_done
    if (isAnimateDone === false) {
      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")
        );
        isAnimateDone = true;
        return;
      }
    }
    //切换所有 animateElements 的 done → init A A_init
    if (isAnimateDone === true) {
      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_done", "_animate_init")
        );
        isAnimateDone = false;
        return;
      }
    }
  };
}

setScreenAnimate(".screen-1");
.screen-1__heading {
  transition: all 1s;
}
.screen-1__heading_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-1__heading_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
.screen-1__phone {
  transition: all 1s;
}
.screen-1__phone_animate_init {
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-1__phone_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
.screen-1__shadow {
  transition: all 1s;
}
.screen-1__shadow_animate_init {
  opacity: 0;
  transform: translate(0, 100%);
}
.screen-1__shadow_animate_done {
  opacity: 1;
  transform: translate(0, 0);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
  </head>

  <body>
    <!-- 头部导航栏 -->
    <header class="header">
      <div class="header__wrap">
        <div class="header__logo">慕课手机</div>
        <nav class="header__nav">
          <a
            href="javescript:;"
            class="header__nav-item
            header__nav-item__status__active"
            >首页</a
          >
          <a href="javescript:;" class="header__nav-item">型号</a>
          <a href="javescript:;" class="header__nav-item">说明</a>
          <a href="javescript:;" class="header__nav-item">其他产品</a>
          <a
            href="javescript:;"
            class="header__nav-item
            header__nav-item__custom__button"
            >立即购买</a
          >
        </nav>
      </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
      <h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>
      <div class="screen-1__phone"></div>
      <div class="screen-1__shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
      <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
      <h3 class="screen-2__subheading">
        采用受欢迎的设计，让它更加出色。<br />
        款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
      </h3>
      <div class="screen-2__phone">
        <div class="scree-2__point scree-2__point_i_1">高清摄像</div>
        <div
          class="scree-2__point scree-2__point_custom_right scree-2__point_i_2"
        >
          超薄机身
        </div>
        <div
          class="scree-2__point scree-2__point_custom_right scree-2__point_i_3"
        >
          大屏显示
        </div>
      </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
      <div class="screen-3">
        <div class="screen-3__wrap">
          <h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
          <h3 class="screen-3__subheading">
            采用受欢迎的设计，让它更加出色。<br />
            款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
          </h3>
          <div class="screen-3__phone"></div>
          <div class="screen-3__features">
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">5.7</div>
              <div class="screen-3__features__item__desc">英寸大屏</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">1200</div>
              <div class="screen-3__features__item__desc">万像素</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">3D</div>
              <div class="screen-3__features__item__desc">touch</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">A9</div>
              <div class="screen-3__features__item__desc">处理器</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
      <div class="screen-4__wrap">
        <h2 class="screen-4__heading">丰富的手机型号</h2>
        <h3 class="screen-4__subheading">
          找到适合你的手机
        </h3>
        <div class="screen-4__type">
          <div class="screen-4__type__item screen-4__type__item_i-1">
            <div class="screen-4__type__item__color">慕课红</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-2">
            <div class="screen-4__type__item__color">土豪金</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-3">
            <div class="screen-4__type__item__color">太空灰</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-4">
            <div class="screen-4__type__item__color">绅士黑</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
      <h2 class="screen-5__heading">游戏、学习、拍照，有这一部就够了</h2>
      <h3 class="screen-5__subheading">
        看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。
      </h3>
      <div class="screen-5__bg"></div>
    </div>
    <!-- 第六屏 -->
    <div class="screen-buy">
      <a href="javascript:;" class="screen-buy__button">立即购买</a>
    </div>
    <!-- 底部 -->
    <footer class="footer">
      © 2016 imooc.com 京ICP备13046642号
    </footer>
    <script type="text/javascript" src="js/text.js"></script>
  </body>
</html>
蛤小蛤 2019-10-23
源自：宣传页项目   4-4 网页动态效果（上）
5
收起

正在回答

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

2回答
好帮手慕慕子 回答被采纳获得+3积分 2019-10-24 10:10:53

同学你好， 因为你在for循环内部使用return语句，导致只循环一次， 就退出了， 所以无法实现效果

建议修改：

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

同学可以自己下去测试一下哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0
收起回答
提问者 蛤小蛤 2019-10-23 19:09:08

我在控制台上看了下，我的phone 和 shadow的后面会成功添加init但是不会从init变done，只有heading会变

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

关于init和done的问题
34 0 2
为什么理论与实际不一样
15 0 3
没有return会有什么影响吗？（3个）
35 0 5
关于变量作用范围
31 0 5
关于INIT初始化的问题
1 0 3

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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