写点什么

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

发布于: 2021 年 03 月 22 日
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 之后就会回归本来的面貌.


发布于: 2021 年 03 月 22 日阅读数: 13
用户头像

不成就忍耐到成。我没有什么本事,只会忍耐 2020.10.03 加入

还未添加个人简介

评论

发布
暂无评论
js逐步实现原生flex系统(html逻辑 css逻辑  js逻辑)