JavaScript+css的flex布局

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语句)