Day5: Flex Panels

Copy 
1/*  在 panels 新增 flex 屬性 */
2
3.panels {
4  display: flex;
5}
6
7/* 每個 panel 比例為1
8要使文字垂直置中，direction 為 column */
9
10.panel {
11  flex-grow: 1;
12  display: flex;
13  flex-direction: column;
14  justify-content: space-around;
15  cursor: pointer;
16}
17
18/* panel 的第一個p和最後一個p移至畫面外 */
19.panel p:first-child {
20  transform: translateY(-100vh);
21}
22
23.panel p:last-child {
24  transform: translateY(100vh);
25}

Copy 
1/* 畫面佔比放大 */
2.panel.open {
3  font-size: 40px;
4  flex-grow: 3;
5}
6
7/* 將文字移動至原來位置 */
8.panel.show-text :first-child,
9.panel.show-text :last-child {
10  transform: translateY(0px);
11}

Copy 
1const panels = document.querySelectorAll(".panel");
2
3panels.forEach((panel) => {
4  panel.addEventListener("click", () => {
5    panel.classList.toggle("open");
6    panel.classList.toggle("show-text");
7  });
8});

Copy 
1// wesbos's method
2const panels = document.querySelectorAll(".panel");
3
4function toggleOpen() {
5  console.log("Hello");
6  this.classList.toggle("open");
7}
8
9function toggleActive(e) {
10  console.log(e.propertyName);
11  if (e.propertyName.includes("flex")) {
12    this.classList.toggle("open-active");
13  }
14}
15
16panels.forEach((panel) => panel.addEventListener("click", toggleOpen));
17panels.forEach((panel) =>
18  panel.addEventListener("transitionend", toggleActive)
19);