老师，我的问题是本节老师演示的宣传页项目的第二屏动画。

<!--screen-2部分 -->
		<div class="screen-2">
			<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
			<h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
			<div class="screen-2__phone">
				<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
				<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
				<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
			</div>
		</div>

这是老师写的第二屏的html，

/* 第二屏动画 */

.screen-2__subheading,
.screen-2__phone,
.screen-2__heading{
	transition:all 1s;
}
.screen-2__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-2__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-2__phone_animate_init{
	opacity: 0;
	transform: translate(0,50%);
}
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}
.screen-2__point{
	transition:all 1s 1s;
}
.screen-2__point_done{
	opacity: 1;
	transform:translate(0,0);
}
.screen-2__point_i_1_animate_init{
	opacity: 0;
	transform: translate(-100%,0);
}
.screen-2__point_i_2_animate_init,
.screen-2__point_i_3_animate_init{
	opacity: 0;
	transform: translate(100%,0);
}

这是老师写的第二屏的动画效果。

var screenAnimateElements = {
	'.screen-1' : [
		'.screen-1__heading',
		'.screen-1__phone',
		'.screen-1__shadow',
	],
	'.screen-2' : [
		'.screen-2__heading',
		'.screen-2__phone',
		'.screen-2__subheading',
		'.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__bg',
	'.screen-5__subheading',
	]
};


function setScreenAnimate(screenCls){
	var screen = document.querySelector(screenCls)//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls]// 需要设置动画的元素
	var isSetAnimateClass = false;// 是否有初始化子元素的样式
	var isAnimateDone = false;//当前屏幕下所有子元素的状态是DONE?
	screen.onclick = function(){
		// 初始化样式，增加init
		if(isSetAnimateClass === false){
			for(var i=0;i<animateElements.length;i++){
				var element = document.querySelector(animateElements[i]);
				var baseCls = element.getAttribute('class');//animateElements[i].substr(1)这是为了去掉animateElements[i]元素中的点，
				element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
			}
			isSetAnimateClass =true;
			return ;
		}
		// 切换所有animateElements的init->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 这是为了解决在动画完成后又没有动画的问题
		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);
	}

这是老师写的js脚本。

我的问题是：为什么在第二屏的动画效果中，老师写“screen-2__point”动画的时候没有写"screen-2__point_animate_init, screen-2__point_animate_done",而是只写了“screen-2__point, screen-2__point_done”还不是"screen-2__point_animate_done"如果这样写和js脚本中定义的函数对不上啊？请老师解答。