1、html部分

<div class="panels"><div class="panel panel1"><p>Hey</p><p>Let's</p><p>Dance</p></div><div class="panel panel2"><p>Give</p><p>Take</p><p>Receive</p></div><div class="panel panel3"><p>Experience</p><p>It</p><p>Today</p></div><div class="panel panel4"><p>Give</p><p>All</p><p>You can</p></div><div class="panel panel5"><p>Life</p><p>In</p><p>Motion</p></div>
</div>

2、CSS部分

2.1 页面布局

	html {box-sizing: border-box;background: #ffc600;font-family: 'helvetica neue';font-size: 20px;font-weight: 200;}body {margin: 0;}*, *:before, *:after {/*inherit 指定box-sizing属性的值，应该从父元素继承*/box-sizing: inherit;}

2.4 对panels进行设置

.panels {min-height: 100vh;/*多余的内容隐藏*/overflow: hidden;display: flex;
}

2.3 对panel进行布局

.panel{display:flex;flex:1;justify-content:center;align-items:center;/*字体设置*/flex-direction:column;color:white;font-size:20px;/*背景设置*/background:#6B0F9C;background-size:cover;background-position:center;box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);/*动画设置*/transition:/*cubic-bezier:从开始到结束的不同速度过渡效果*/font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),background 0.2s;
}

:::tip
flex-direction叫交叉轴，如果主轴是横的，那么交叉轴就会选择竖轴；如果是竖轴就变成横轴
它指定了内部元素（比如列题的p元素）是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。一般规定为横向
:::

2.4 对应的flex块设置图片

.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

2.5 对panel及其内部属性进行动画设置

.panel > * {margin:0;width:100%;/*会让图片先弹一下，然后再打开*/transition:tansform 0.5s;flex:1;
}.panel p{text-transform:uppercase;font-family:'Amatic SC',cursive;text-shadow:0 0 4px rgba(0,0,0,0.72),0 0 14px rgba(0,0,0,0.45);font-size:2em;display:flex;justify-content:center;align-items:center;
}

2.6 对JavaScript进行设置

.panel > *:first-child {transform:translateY(-100%);}
.panel > *:first-child {transform:translateY(100%);}.panel.open-active > *:first-child{transform:translateY(0);
}
.panel.open-active > *:last-child{transform:translateY(0);
}.panel p:nth-child(2) {font-size: 4em;
}
/* JS時需要toggle的class 文字放大及flex等份要變大 */
.panel.open {font-size: 40px;/*为了js后期，点击图片，然后变大图片*/flex: 5;
}		

3、JavaScript部分

3.1 获取要进行的循环的Panels

let panels = document.querySelectorAll(".panels");

3.2 监听，添加监听事件

panels.forEach(panels=>{panel.addEventListener("click",clickHandler);panel.addEventListener("transitionend",transitionHandler);
})function clickHandler(){this.classList.toggle("open");
}function transitionHandler(e){//注意这里的transtionend有很多个属性，所以我们要明确属性的名字。console.log(e);//只有flex确定flex做完，open-active才会执行，如果不加判断，toggle会根据有几次transform而显示或不显示，如果是偶数次就不会显现，是奇数次就会显示//indexOf()：方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。if(e.propertyName.indexOf("flex") !== -1){this.classList.toggle("open-active");}
}

假设直接写了 toogle 在 transitionendHandler 中的话，事件有两个所以被触发了两次，导致上下的文字进来了又出去，但如果今天回传的事件是奇数又会可以触发。因此，我们要写个判断式来触发 Class open-active(if语句)