为什么理论与实际不一样

为什么理论与实际不一样

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

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

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

<!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 作业题
15
收起

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
收起回答
好帮手慕慕子 2019-12-21 17:52:36

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

  1.  因为老师之前是以源码中的第一屏为例测试的。 源码中默认第一屏是隐藏状态，所以需要点击两次。 第一次给元素添加init类样式， 第二次点击将init类切换为done，变换样式。

  2. 老师现在测试你写的代码，第一屏中默认是显示的，所以第一次点击添加init类样式，会变换样式，让元素有显示变为隐藏。

  3. 同学可以在第一屏的html结构中添加初始init类，这个时候就需要点击两次才可以变换样式

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

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

0
收起回答
  • 提问者 迷失的小麦 #1
    还是不太懂，已经是div class="screen-1__phone screen-1__phone_animate_init"></div>了，怎么还要添加init？（点击两次）能不能换个角度讲解为什么，有点混混转，为什么一会默认隐藏一会默认显示？（第一步是初始化init，按理说div添加init，只需要点击一次变为done即可，也就是说老师的代码点击一次即可）怎么反过来我的代码点击一次，老师的反而是两次
    2019-12-21 20:46:40
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，您好，我没区分清楚实际高度和实际占据高度。
30 0 4
点赞功能与现实不符
8 0 3
html与实际查看的不一样
60 0 5
100px在PC端和移动端为什么实际效果不一样？
10 0 5
请检查 登录为什么不一样高
1 0 4

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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