老师单单这段代码是不是只能将元素设置init动画,

老师单单这段代码是不是只能将元素设置init动画,

var screenAnimateElements = {  '.screen-1' : [    '.screen-1__heading',    '.screen-1__phone',    '.screen-1__shadow',  ],  '.screen-2' : [    '.screen-2__heading',    '.screen-2__subheading',    '.screen-2__phone',    '.screen-2__point_i_1',    '.screen-2__point_i_2',    '.screen-2__point_i_3',  ],  '.screen-3' : [    '.screen-3__heading',    '.screen-3__phone',    '.screen-3__subheading',    '.screen-3__features',  ],  '.screen-4' : [    '.screen-4__heading',    '.screen-4__subheading',    '.screen-4__type__item_i_1',    '.screen-4__type__item_i_2',    '.screen-4__type__item_i_3',    '.screen-4__type__item_i_4',  ],  '.screen-5' : [     '.screen-5__heading',    '.screen-5__subheading',    '.screen-5__bg',  ]};function setScreenAnimate(screenCls) {  var screen = document.querySelector(screenCls); // 获取当前屏的元素  var animateElements =  screenAnimateElements[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 ;    }  }}for(k in screenAnimateElements){  setScreenAnimate(k);}

正在回答

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

2回答

同学你好,这段代码,只是用来测试的,后面会讲解怎么实现自动播放,即页面滚动到哪一屏,就播放哪一屏动画,同学继续往下听。

源代码中,index.js就是实现自动播放的,同学可以引入该js,看下效果。

祝学习愉快!

  • 母鸡阿 提问者 #1
    老师,也就是说,这个测试的代码仅仅只用来测试,最终的自动播放js代码在index.js里是吗
    2020-08-22 11:02:14
  • 好帮手慕久久 回复 提问者 母鸡阿 #2
    是的,这个代码,只是为了让大家知道,怎么让元素从无动画变成有动画(切换类名),而最终的代码是在index.js中。 祝学习愉快!
    2020-08-22 11:19:48
好帮手慕久久 2020-08-22 10:44:23

同学你好,不是的,这段代码有三个功能:

第一次点击,给元素添加初始类名init;第二次点击,将元素的初始类名切换成done,即开始动画;再次点击,会将done切换成init,元素移除动画,还原;再点击,会将init切换成done,元素再次动画,依此类推:

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

同学再看一下。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 提问者 母鸡阿 #1
    老师这个明白了,有一点,这个点击事件是仅仅用来测试吗。后来的自动播放是怎么实现的,有点迷老师,有代码吗
    2020-08-22 10:52:20
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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