js逐步实现原生flex系统(html逻辑 css逻辑 js逻辑)

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>

效果:

注意点:panel1~5的意思是五张图片.

css:

*{padding: 0px;margin: 0px;}
		.panels
		{
			display: flex;
		}
		.panel
		{

			min-height: 100vh;
			overflow: hidden;
			color: white;
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			line-height: 33.3vh;
			justify-content: center;
			background-position: center;
			 transition:
        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; 
		}
	.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/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); }
    .panel>p
    {
    	/*border: 2px solid red;*/
    	flex: 1;/*每一个p占据三分之一的panel的空间.不然的话,你删除flex:1就知道了*/
    }
    .panel>p:first-child
    {
    	transform: translateY(-100%);
    }
    .panel.open-active>p:first-child
    {
    	transform: translateY(0);
    }
    .panel>p:last-child
    {
    	transform: translateY(100%);
    }
    .panel.open-active>p:last-child
    {
    	transform: translateY(0);
    }
    .panel p
    {
    	text-transform: uppercase;
    	font-size: 2em;
    }
    .panel p:nth-child(2)
    {
    	font-size: 4em;
    }
 .panel.open {
      flex: 5;
      font-size:40px;
    }

效果：

css逻辑:
第一:先panels弹性布局,使得panels里面的panel水平排列,panel也flex布局,使得里面的p垂直排列,这里面的flex: 1;代表分别代表所有的panel完美适应body,和所有的p完美适应panel.

第二：点击了是panel里面的第一个p与最后一个p回归原位,点击之前是消失的.

第三：flex:5我的理解是比原来扩大5倍.

js部分：

const panels = document.querySelectorAll('.panel');
	function toggleOpen() {
		this.classList.toggle("open");
	}
	function  toggleActive(e)
	{
		if(e.propertyName.includes("flex"))
		{
			this.classList.toggle("open-active");
		}
	}
	panels.forEach(panel=>panel.addEventListener('click',toggleOpen));
	panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

js实现逻辑:
第一:先获取所有的panel
第二:当点击某一个panel的时候,就执行

文字(40px)与宽度扩大(5倍).

第三：是当第二步结束之后（动画结束之后）,第一个p与最后一个p回来。（注意一下,）
注意一下；toggle是执行完里面的东西之后比如class之后就会回归本来的面貌.