为什么理论与实际不一样

之前老师的回答：https://class.imooc.com/course/qadetail/180149

我自己的思考和老师的回答一样，

说是需要点击两次，为什么我自己编写代码时，只要点击一次就有效果了

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.css">
<title>无标题文档</title>
</head>
 
<body>
    <header>
        <div class="header_box">
            <div class="header_logo">H5实战页面</div>
            <nav>
                <a href="javascript:void(0)" class="header_box_nav_a">实战课程</a>
                <a href="javascript:void(0)" class="header_box_nav_a">商业案例</a>
                <a href="javascript:void(0)" class="header_box_nav_a">课程体系</a>
                <a href="javascript:void(0)" class="header_box_nav_a">集成环境</a>
                <a href="javascript:void(0)" class="header_box_nav_a">云端学习</a>
                <div class="header_box_nav_line"></div>
                <a href="javascript:void(0)" class="header_box_nav_a header_box_nav_item">即刻学习</a>
            </nav>
        </div>
    </header>
    <div class="screen-1">
        <h2 class="screen-1_h2">实战课程重磅上线</h2>
        <h3 class="screen-1_h3">一键云学习，还在等待什么？</h3>   
    </div>
    <div class="screen-2">
        <div class="screen-2_box">
            <h2 class="screen-2_h2">每门课都是真实商业案例</h2>
          <div class="screen-2_line"></div>
            <h3 class="screen-2_h3">
                真实案例，真实场景，在实战中实践、操作、调试<br>
                大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现
            </h3>
            <div class="screen-2_people"></div>
            <div class="screen-2_cloud"></div>
            <div class="screen-2_plane"></div>
        </div>
    </div>
    <div class="screen-3">
        <div class="screen-3_box">
            <div class="screen-3_left"></div>
            <div class="screen-3_smallbox_up">
                <h2 class="screen-3_h2">强大的语言课程体系支持</h2>
                <div class="screen-3_smallbox_up_line"></div>
                <h3 class="screen-3_h3">
                    学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决，<br>
                    让你体验开发全流程
                </h3> 
            </div>
            <div class="screen-3_smallbox_down">
                <div class="screen-3_connent screen-3_smallbox_down1">HTML5</div>
                <div class="screen-3_connent screen-3_smallbox_down2">PHP</div>
                <div class="screen-3_connent screen-3_smallbox_down3">JAVA</div>
                <div class="screen-3_connent screen-3_smallbox_down4">Python</div>
                <div class="screen-3_connent screen-3_smallbox_down5">Node.js</div>
            </div>
        </div>
    </div>
    <div class="screen-4">
        <div class="screen-4_box">
            <h2 class="screen-4_h2">省去本地复杂的环境搭建</h2>
            <div class="screen-4_line"></div>
            <h3 class="screen-4_h3">你可以告别在虚拟机中调试开发了</h3>
            <div class="screen-4_smallbox">
                <div class="screen-4_smallbox_connnent screen-4_smallbox1">实战课程集成开发环境</div>
                <div class="screen-4_smallbox_connnent screen-4_smallbox2">内置终端命令行</div>
                <div class="screen-4_smallbox_connnent screen-4_smallbox3">编译你的应用程序</div>
                <div class="screen-4_smallbox_connnent screen-4_smallbox4">通过云端服务输出效果</div>
            </div>
        </div>
    </div>
    <div class="screen-5">
        <div class="screen-5_box">
            <div class="screen-5_people"></div>
            <h2 class="screen-5_h2">省去本地复杂的环境搭建</h2>
            <div class="screen-5_line"></div>
            <h3 class="screen-5_h3">你可以告别在虚拟机中调试开发了</h3>
        </div>
    </div>
    <div class="screen-buy">
        <a class="screen-buy_button" href="javascript:;">继续了解学习体验</a>
    </div>
    <footer>
        <div class="footer_box">
            <div class="footer_up_box">
                <a href="javascript:;" class="footer_up_connent">网站首页</a>
                <a href="javascript:;" class="footer_up_connent">人才招聘</a>
                <a href="javascript:;" class="footer_up_connent">联系我们</a>
                <a href="javascript:;" class="footer_up_connent">高校联盟</a>
                <a href="javascript:;" class="footer_up_connent">关于我们</a>
                <a href="javascript:;" class="footer_up_connent">讲师招募</a>
                <a href="javascript:;" class="footer_up_connent">意见反馈</a>
                <a href="javascript:;" class="footer_up_connent">友情链接</a>
            </div>
            <div class="footer_down">© 2016 imooc.com 京ICP备13046642号</div>
        </div>
    </footer>
    <script>
    //封装创建事件的函数
    function addHandler(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, true);
        }
        else if (element.attachEvent) {
             element.attachEvent('on' + type, handler);
        }
        else {
             element['on' + type] = handler;
        }
        }
    var screen={
        ".screen-1":[".screen-1_h2",".screen-1_h3"],
        ".screen-2":[".screen-2_h2",".screen-2_h3",".screen-2_line",".screen-2_people",".screen-2_cloud",".screen-2_plane"],
        ".screen-3":[".screen-3_h2",".screen-3_smallbox_up_line",".screen-3_h3",".screen-3_connent"],
        ".screen-4":[".screen-4_h2",".screen-4_h3",".screen-4_line",".screen-4_smallbox_connnent"],
        ".screen-5":[".screen-5_people",".screen-5_h2",".screen-5_h3",".screen-5_line"]
    };
    function animate(ele){
        var screenele=screen[ele];//对象里面的screen1-5
        var target=document.querySelector(ele);
        var isSetAnimateClass = false; // 是否有初始化子元素的样式
          var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？
        addHandler(target,"click",function(){
            if(isSetAnimateClass==false){//  初始化样式，增加init A A_init
                for(var i=0;i<screenele.length;i++){
                    var screenanimate=document.querySelector(screenele[i]);//对象里面的screen1-5数组里的每一项
                    var classscreen=screenanimate.getAttribute("class");
                    screenanimate.setAttribute('class',classscreen +' '+screenele[i].substr(1)+'_animate_init');
                }
                isSetAnimateClass = true;
                return ;
            }
            if(isAnimateDone == false){//切换所有 animateElements 的  init -> done   A A_done
               for(var i=0;i<screenele.length;i++){
                    var screenanimate=document.querySelector(screenele[i]);//对象里面的screen1-5数组里的每一项
                    var classscreen=screenanimate.getAttribute("class");
                    screenanimate.setAttribute('class',classscreen.replace('_animate_init','_animate_done'));
                }
                isAnimateDone = true;
                return ;
            }
            if(isAnimateDone == true){//切换所有 animateElements 的  done -> init   A A_init
               for(var i=0;i<screenele.length;i++){
                    var screenanimate=document.querySelector(screenele[i]);//对象里面的screen1-5数组里的每一项
                    var classscreen=screenanimate.getAttribute("class");
                    screenanimate.setAttribute('class',classscreen.replace('_animate_done','_animate_init'));
                }
                isAnimateDone = false;
                return ;
            }
        });
    }
    for(k in screen){animate(k);}
    </script>
</body>
</html>

/*第一屏*/
.screen-1_h2,.screen-1_h3{transition: all 1s;}
.screen-1_h2_animate_init{opacity: 0;transform: translate(0,100%);}
.screen-1_h2_animate_done{opacity: 1;transform: translate(0,0);}
.screen-1_h3_animate_init{opacity: 0;transform: translate(0,-100%);}
.screen-1_h3_animate_done{opacity: 1;transform: translate(0,0);}

@charset "utf-8";
/* CSS Document */
/*全局*/
*{margin: 0;padding: 0;}
/*导航条*/
header{width: 100%;background-color: #f3f5f7;}
.header_box{width: 1200px;height: 80px;margin: 0 auto;position: relative;overflow: hidden;}
.header_box .header_logo{background: url("../img/logo.png") no-repeat left center;background-size: 40px 40px;
position: absolute;left: 0;top: calc(50% - 20px);width: 150px;height: 40px;font-size: 18px;line-height: 40px;
text-indent: 50px;}
nav{position: absolute;right: 0;top: calc(50% - 40px);}
.header_box .header_box_nav_a{line-height: 80px; display: inline-block;text-decoration: none;color: black;
margin-left: 40px;cursor: pointer;font-size: 14px;}
.header_box .header_box_nav_item{background-color: red;color: white;width: 95px;height: 40px;
border-radius: 5px;text-align: center;line-height: 40px;}
.header_box_nav_line{width: 58px;height: 2px;position: absolute;margin-left: 40px;
    left: 0;bottom: 20px;background-color: red;}
/*第一屏*/
.screen-1{width: 100%;height: 640px;background-image: url("../img/sc1.jpg");background-size: cover;}
.screen-1_h2{color: white;font-size: 40px;text-align: center;padding-top: 240px;}
.screen-1_h3{color: white;font-weight: normal;font-size: 14px;text-align: center;padding-top: 35px;}

迷失的小麦 2019-12-21

源自：宣传页项目 5-6 作业题

收起

2回答

好帮手慕星星 2019-12-22 10:31:10

同学你好，问题解答如下：

1、点击两次是因为设置的isSetAnimateClass变量初始值为false。一开始元素已经有init类，是隐藏状态。代码中判断：如果变量值是false，会添加init类

所以第一次点击的时候没有效果变化，添加了init类，也就是这种效果：

再次点击就会将init类切换成done类，元素就显示出来了：

如果同学想要点击一次实现切换效果，可以将变量初始值改为true：

2、同学的点击一次，是因为元素中默认没有写init类，元素是显示的：

点击就会添加init类隐藏元素：

再次点击切换为done类显示元素：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕慕子 2019-12-21 17:52:36

同学你好，对于你的问题解答如下：

因为老师之前是以源码中的第一屏为例测试的。源码中默认第一屏是隐藏状态，所以需要点击两次。第一次给元素添加init类样式，第二次点击将init类切换为done，变换样式。
老师现在测试你写的代码，第一屏中默认是显示的，所以第一次点击添加init类样式，会变换样式，让元素有显示变为隐藏。
同学可以在第一屏的html结构中添加初始init类，这个时候就需要点击两次才可以变换样式

如果帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者迷失的小麦 #1

还是不太懂，已经是div class="screen-1__phone screen-1__phone_animate_init"></div>了，怎么还要添加init？（点击两次）能不能换个角度讲解为什么，有点混混转，为什么一会默认隐藏一会默认显示？（第一步是初始化init，按理说div添加init，只需要点击一次变为done即可，也就是说老师的代码点击一次即可）怎么反过来我的代码点击一次，老师的反而是两次

2019-12-21 20:46:40