动画元素状态无法从init切换到done

动画元素状态无法从init切换到done

# 具体遇到的问题
动画效果不对，状态无法切换到done

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

pj2.js

​

var getElem = function(selector){

return document.querySelector(selector);

}


var getAllElem = function(seletor){

return document.querySelectorAll(selector);

}


var getCls = function(element){

return element.getAttrubute('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);

}

return;

}

var delCls = function(element, cls){

var baseCls = getCls(element);

if(baseCls.indexOf(cls) > -1){

setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g,' '));

}

return;

}




var screenAnimateElements = {

'.screen-1' : [

'.screen-1__h1',

'.screen-1__h2'

],

'.screen-2' : [

'.screen-2__h1',

'.screen-2__h2',

'.screen-2__pt1',

'.screen-2__pt2'

],

'.screen-3' : [

'.screen-3__pt1',

'.screen-3__h1',

'.screen-3__h2',

'.screen-3__nav',

],

'.screen-4' : [

'.screen-4__h1',

'.screen-4__h2',

'.screen-4__features'

],

'.screen-5' : [

'.screen-5__pic',

'.screen-5__h1',

'.screen-5__h2',

]

};


function setScreenAnimateInit(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');

}

}

window.onload = function(){

for(k in screenAnimateElements){

if(k =='.screen-1'){

continue;

}

setScreenAnimateInit(k);

}

}


function playScreenAnimateDone(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'));

}

}

setTimeout(function(){playScreenAnimateDone('.screen-1');},100);





window.onscroll = function(){

var top = document.body.scrollTop;

if(top>640-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');

}

}


var navItems = getAllELem('.header__')




pj2Anima.css

.screen-2__h1{

transition:all 1s;

}


.screen-2__h1_animate_init{

opacity:0;

transform:translate(0, -100%);

}

.screen-2__h1_animate_done{

opacity:1;

transform:translate(0, 0);

}








@keyframes glitch{

0%{

clip-path: var(--slice-1);

transform:translate(-20px, -10px);

}

10%{

clip-path:var(--slice-3);

transform:translate(10px, 10px);

}

20%{

clip-path:var(--slice-1);

transform:translate(-10px, 10px);

}

30%{

clip-path:var(--slice-3);

transform:translate(0px, 5px);

}

40%{

clip-path:var(--slice-2);

transform:translate(-5px, 0px);

}

50%{

clip-path:var(--slice-4);

transform:translate(5px, 10px);

}

60%{

clip-path:var(--slice-4);

transform:translate(5px, 10px);

}

70%{

clip-path:var(--slice-2);

transform:translate(-10px, 10px);

}

80%{

clip-path:var(--slice-5);

transform:translate(20px, -10px);

}

90%{

clip-path:var(--slice-1);

transform:translate(-10, 0px);

}

100%{

clip-path:var(--slice-1);

transform:translate(0);

}

}


button:hover{

cursor:pointer;

}

button:hover::after{

animation:glitch 1s steps(2, end);

}




pj2.css

*{

padding:0;

margin:0;

}

a{

text-decoration: none;

}

a:link,

a:visited{

color:white;

}

.header{

width:100%;

color:#fff;

height:80px;

position:fixed;

margin:0 auto;

z-index:9;

background:rgba(0,0,0,0.3);

}

.header__logo{

width:150px;

background:url("../图片素材/img/logo.png") left center no-repeat;

background-size:38px 38px;

height:80px;

position:absolute;

top:50%;

margin-top:-40px;

line-height:80px;

text-indent:50px;

left:10px;

}

.header__logo:hover{

cursor:pointer;

color:rgb(160, 157, 157);

}


.header__nav{

position:absolute;

height:40px;

right:30px;

top:50%;

margin-top:-20px;

}

.header__nav-item{

width:90px;

height:40px;

display:block;

float:left;

font-size:13px;

text-align:center;

line-height:40px;

}

.header__nav-item_button{

background:red;

border-radius:5px;

}

.header__nav-item_button:hover{

background:rgb(163, 5, 5);

}

.header__nav-item_active::after{

content:"";

display:block;

width:60%;

height:2px;

background:red;

margin:0 auto;

}


.screen-1{

width:1200px;

height:640px;

background:url("../图片素材/img/sc1.jpg") no-repeat;

background-size:cover;

position:relative;

text-align: center;

color:white;

}

.screen-1__h1{

padding-top:250px;

}

.screen-1__h2{

padding-top:10px;

padding-left:5px;

font-weight:normal;

padding-bottom:30px;

}


button, button::after{

margin:0 auto;

width:380px;

height:86px;

font-size:36px;

font-family:'Bebas Neue', cursive;

background:linear-gradient(45deg, transparent 5%, #FF013C 5%);

border:0;

color:#fff;

letter-spacing:3px;

line-height:88px;

box-shadow:6px 0px 0px #00E6F6;

outline:transparent;

position:relative;

}

button::after{

--slice-0:inset(50% 50% 50% 50%);

--slice-1:inset(80% -6px 0 0);

--slice-2:inset(50% -6px 30% 0);

--slice-3:inset(10% -6px 85% 0);

--slice-4:inset(40% -6px 43% 0);

--slice-5:inset(80% -6px 5% 0);

content:'AVAILABLE NOW';

display:block;

position:absolute;

top:0;

left:0;

bottom:0;

background:linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);

text-shadow:-3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;

clip-path:var(--slice-0);

}


.screen-2{

width:1200px;

height:640px;

background:url("../图片素材/img/sc2.png") bottom center no-repeat;

background-size:50% 46%;

text-align: center;

position:relative;

z-index:1;

}

.screen-2__h1{

padding-top:100px;

}

.screen-2__h1::after{

content:"";

display: block;

background:red;

width:40px;

height:2px;

margin:0 auto;

margin-top:16px;

margin-bottom:13px;

}

.screen-2__h2{

font-weight: normal;

}

.screen-2__pt1{

width:300px;

height:600px;

background:url("../图片素材/img/sc2-1.png") center center no-repeat;

background-size:80% 55%;

position: relative;

margin:0 auto;

z-index:3;

margin-top:-38px;

}

.screen-2__pt2{

width:266px;

height:285px;

background:url("../图片素材/img/sc2-2.png") center center no-repeat;

background-size:80% 60%;

z-index:2;

position:absolute;

top:335px;

left:550px;

}


.screen-3{

width:1200px;

height:640px;

background: #293134;

color:white;

position:relative;

}

.screen-3__h1{

position:absolute;

top:200px;

left:700px;

}

.screen-3__h1::after{

content:"";

display:block;

background:red;

width:40px;

height:2px;

margin-top:18px;

}

.screen-3__h2{

position:absolute;

top:270px;

left:700px;

font-weight: normal;

}

.screen-3__nav{

position:absolute;

top:480px;

left:700px;

}

.screen-3__nav-item{

float:left;

font-size:13px;

border-radius:50%;

width:56px;

height:56px;

text-align: center;

line-height: 56px;

margin-right:28px;

}

.screen-3__nav-item:nth-child(1){

border:4px solid rgba(66, 167, 210, .3);

color:#46B3E1;

}

.screen-3__nav-item:nth-child(2){

border:4px solid rgba(131, 86, 219, .3);

color:#6D50E2;

}

.screen-3__nav-item:nth-child(3){

border:4px solid rgba(234, 68, 12, .3);

color:#EA440C;

}

.screen-3__nav-item:nth-child(4){

border:4px solid rgba(12, 234, 230, .3);

color:rgba(12, 234, 230, .8);

}

.screen-3__nav-item:nth-child(5){

border:4px solid rgba(158, 242, 63, .3);

color:rgba(158, 242, 63, .8);

}

.screen-3__pt1{

position:absolute;

left:-70px;

background:url("../图片素材/img/sc3.png") center center no-repeat;

background-size:70% 70%;

width:640px;

height:640px;

}


.screen-4{

width:1200px;

height:640px;

position:relative;

margin:0 auto;

}

.screen-4__h1{

text-align:center;

padding-top:80px;

}

.screen-4__h1::after{

content:"";

display:block;

background:red;

width:40px;

height:2px;

margin:0 auto;

margin-top:18px;

}

.screen-4__h2{

text-align:center;

font-weight:normal;

padding-top:16px;

}

.screen-4__features{

position:absolute;

width:1000px;

left:50%;

margin-left:-400px;

top:45%;

}

.screen-4__features-item{

float:left;

margin-right:90px;

}

.screen-4__features-pic{

width:60px;

height:60px;

margin-left:28px;

padding-bottom:40px;

}

.screen-4__features-pic1{

background:url("../图片素材/img/sc4-1.png") center center no-repeat;

background-size:contain;

margin-left:40px;

}

.screen-4__features-pic2{

background:url("../图片素材/img/sc4-2.png") center center no-repeat;

background-size:contain;

}

.screen-4__features-pic3{

background:url("../图片素材/img/sc4-3.png") center center no-repeat;

background-size:contain;

}

.screen-4__features-pic4{

background:url("../图片素材/img/sc4-4.png") center center no-repeat;

background-size:contain;

margin-left:40px;

}


.screen-5{

width:1200px;

height:640px;

background:url("../图片素材/img/sc5.jpg") no-repeat;

position:relative;

color:white;

}

.screen-5__pic{

background:url("../图片素材/img/sc5-1.png") center center no-repeat;

width:300px;

height:300px;

position:absolute;

left:50%;

margin-left:-150px;

top:50px;

}

.screen-5__h1{

position:absolute;

top:340px;

left:50%;

transform:translate(-50%,0);

}

.screen-5__h1::after{

content:"";

display:block;

background:white;

width:40px;

height:2px;

margin:0 auto;

margin-top:14px;

}

.screen-5__h2{

position:absolute;

top:420px;

left:50%;

transform:translate(-50%,0);

font-weight: normal;

}

.screen-6{

width:1200px;

height:180px;

display: flex;

justify-content: center;

align-items: center;

}

.screen-6__button{

text-align:center;

color:black;

border:1px solid black;

border-radius:3px;

width:200px;

height:50px;

line-height:50px;

}

.screen-6__button:hover{

color:red;

cursor:pointer;

}

.footer{

width:1200px;

height:100px;

background:black;

text-align:center;


}

.footer__nav{

padding-top:20px;

}

.footer__nav a:hover{

cursor:pointer;

color:red;

}

.footer__nav a{

color:rgb(204, 202, 202);

}

.footer-item{

padding-left:28px;

font-size:12px;

}

.footer__txt{

padding-top:8px;

font-size:13px;

color:rgb(124, 124, 124);

}

.outline{

position: fixed;

padding: 5px 10px;

bottom: 120px;

right: 0;

background-color: #fff;

box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);

z-index: 3;

}

.outline__item {

display: block;

width: 40px;

height: 30px;

line-height: 30px;

padding: 5px 0;

background: rgb(255,255,255);

margin: 5px 0px 0px;

border-top: 1px solid #eee;

text-align: center;

}

.outline__item_active{

border-bottom:1px solid rgb(177, 174, 174);

}


.outline a{

color:black;

}

.outline a:hover{

color:red;

}




html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="../css/pj2.css"/>

<link rel="stylesheet" type="text/css" href="../css/pj2Anima.css"/>

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

</head>

<body>

<div class="box">

<header class="header">

<div class="header__logo">

H5实战页面

</div>

<nav class="header__nav">

<a href="#" class="header__nav-item header__nav-item_active">实战课程</a>

<a href="#" class="header__nav-item">商业案例</a>

<a href="#" class="header__nav-item">课程体系</a>

<a href="#" class="header__nav-item">集成环境</a>

<a href="#" class="header__nav-item">云端学习</a>

<a href="#" class="header__nav-item header__nav-item_button">即刻学习</a>

</nav>

</header>

<div class="screen-1">

<h1 class="screen-1__h1">实战课程重磅上线</h1>

<h6 class="screen-1__h2">一键云学习，还在等待什么？</h6>

<button>AVAILABLE NOW</button>

</div>

<div class="screen-2">

<h1 class="screen-2__h1">每门课都是真实商业案例</h1>

<h5 class="screen-2__h2">真实案例，真实场景，在实战中实践、操作、调试<br/>

大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现

</h5>

<div class="screen-2__pt1"></div>

<div class="screen-2__pt2"></div>

</div>

<div class="screen-3">

<div class="screen-3__pt1"></div>

<h2 class="screen-3__h1">强大的语言课程体系支持</h2>

<h5 class="screen-3__h2">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决,<br/>

让你体验开发全流程

</h5>

<nav class="screen-3__nav">

<div class="screen-3__nav-item">HTML5</div>

<div class="screen-3__nav-item">PHP</div>

<div class="screen-3__nav-item">JAVA</div>

<div class="screen-3__nav-item">Python</div>

<div class="screen-3__nav-item">Node.js</div>

</nav>

</div>

<div class="screen-4">

<h1 class="screen-4__h1">省去本地复杂的环境搭建</h1>

<h4 class="screen-4__h2">你可以告别在虚拟机中调试开发了</h4>

<div class="screen-4__features">

<div class="screen-4__features-item">

<div class="screen-4__features-pic screen-4__features-pic1">


</div>

<div class="screen-4__features-txt">

实战课程集成开发环境

</div>

</div>

<div class="screen-4__features-item">

<div class="screen-4__features-pic screen-4__features-pic2">


</div>

<div class="screen-4__features-txt">

内置终端命令行

</div>

</div>

<div class="screen-4__features-item">

<div class="screen-4__features-pic screen-4__features-pic3">


</div>

<div class="screen-4__features-txt">

编译你的应用程序

</div>

</div>

<div class="screen-4__features-item">

<div class="screen-4__features-pic screen-4__features-pic4">


</div>

<div class="screen-4__features-txt">

通过云端服务输出效果

</div>

</div>

</div>

</div>

<div class="screen-5">

<div class="screen-5__pic"></div>

<h1 class="screen-5__h1">云端学习可以这样简单</h1>

<h5 class="screen-5__h2">看视频，敲代码，一气呵成，结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h5>

</div>

<div class="screen-6">

<div class="screen-6__button">继续了解学习体验</div>

</div>

<footer class="footer">

<div class="footer__nav">

<a href="#" class="footer-item">网站首页</a>

<a href="#" class="footer-item">人才招聘</a>

<a href="#" class="footer-item">联系我们</a>

<a href="#" class="footer-item">高校联盟</a>

<a href="#" class="footer-item">关于我们</a>

<a href="#" class="footer-item">讲师招募</a>

<a href="#" class="footer-item">意见反馈</a>

<a href="#" class="footer-item">友情链接</a>

</div>

<div class="footer__txt">

Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2

</div>

</footer>

<div class="outline">

<a href="#" class="outline__item outline__item_active">实</a>

<a href="#" class="outline__item">商</a>

<a href="#" class="outline__item">课</a>

<a href="#" class="outline__item">集</a>

<a href="#" class="outline__item">云</a>

<a href="#" class="outline__item outline__item_button">即</a>

</div>

</div>

<script src="../js/pj2.js"></script>

</body>

</html>
蛋挞狂魔 2020-12-30
源自：宣传页项目   5-6 作业题
14
收起

正在回答

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

2回答
好帮手慕星星 回答被采纳获得+3积分 2020-12-30 18:09:05

同学你好，是文档声明的原因。

1、老师课程中没有写H5文档声明，直接写了html标签

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

所以使用document.body.scrollTop可以获取到滚动值。

2、同学的代码中用了H5文档声明

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

这时候document.body.scrollTop可能就获取不到了，需要使用document.documentElement.scrollTop才可以。

所以一般推荐两种方式一起写，浏览器通过哪种方式可以获取到就会使用哪种。

祝学习愉快！

0
收起回答
好帮手慕星星 2020-12-30 10:25:28

同学你好，测试是没有获取到滚动高度的问题，top值一直为0

http://img1.sycdn.imooc.com//climg/5febe4f6090ab26805190171.jpg​

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

无法满足if判断，也就无法切换到done。

可能是浏览器兼容的问题，建议写两种方式，参考：

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

祝学习愉快！

0
收起回答
  • 提问者 蛋挞狂魔 #1

    请问老师，都是使用 chrome浏览器，我运行慕课手机的demo时网页可以正常显示动画效果，并且动画可以切换为done, 我看了js部分代码，老师的写法也是document.body.scrollTop, 为什么我自己写的会出现兼容性问题呢？

    2020-12-30 12:10:11
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师单单这段代码是不是只能将元素设置init动画，
5 0 5
没有return会有什么影响吗？（3个）
35 0 5
关于init和done的问题
34 0 2
老师帮忙看下，就是刷新了后就直接进入init，没有转换done
20 0 3
动画切换功能
19 0 2

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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