老师单单这段代码是不是只能将元素设置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);}
正在回答
同学你好,这段代码,只是用来测试的,后面会讲解怎么实现自动播放,即页面滚动到哪一屏,就播放哪一屏动画,同学继续往下听。
源代码中,index.js就是实现自动播放的,同学可以引入该js,看下效果。
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星