ExpandingCard扩展卡片

文章目录

源码

演示效果

分析思路

  1. 使用flex布局,每个卡片的宽度都由flex进行灵活调整
  2. 交互可以增加和删除active,来实现宽度扩增和恢复
  3. 还需要使用transition进行动画过渡,使得平滑切换

核心代码

首先创建一个容器container,里面包含5个卡片,进行布局样式。

css 复制代码
.container .card {
  height: 80vh;
  margin: 10px;
  position: relative;
  border-radius: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0.5;
  cursor: pointer;
  transition: all 700ms ease-in;
}

flex

flex是复合属性,复合了: flex-grow 、flex-shrink 、flex-basis 三个属性,默认值为0 1 auto

flex-grow: 0.5:这表示当父容器有多余空间时,该flex项目将能够增长,但其增长能力是其他flex-grow值为1的项目的0.5倍。如果另一个flex项目的flex-grow值为1,那么当空间分配时,这个值为0.5的项目将只获得一半的空间增长量。

补充

  • flex:1 1 auto ,简写: flex:auto
  • flex:1 1 0 ,简写: flex:1
  • flex:0 0 auto ,简写: flex:none
  • flex:0 1 auto ,简写: flex:0 auto (flex 初始值)
  • 非负数字,等同于 flex:非负数字 1 0% ,能放大也能缩小,数字代表占父级剩余尺寸份数
  • 像素值,等同于 flex 1 1 像素值,能放大也能缩小,像素值代表容器在分配多余空间之前,子项所占的主轴空间。

我们一般用flex:数值来代表占父元素剩余尺寸的份数。

给具有active类的标签设置flex为5。

css 复制代码
.container .card.active {
  flex: 5
}

交互可以使用js实现。获取所有卡片,forEach循环给卡片增加一个active类,在增加之前,需要先移除卡片已经有的active类,再进行添加。

这样做的好处是,原本已经扩增的卡片,可以恢复到原来的宽度,而点击增加active类的卡片,可以扩增。

js 复制代码
const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
  card.addEventListener("click", () => {
    removeActiveClass();
    card.classList.add("active");
  });
});
// 移除active类
function removeActiveClass() {
  cards.forEach((card) => {
    card.classList.remove("active");
  });
}

这里也可以做一个屏幕适配,使用媒体查询。当屏幕尺寸到达一个宽度,会有两个卡片进行隐藏。

css 复制代码
/* 媒体查询 */
@media (max-width:580px) {
  .container {
    width: 100vw;
  }

  .card:nth-child(4),
  .card:nth-child(5) {
    display: none;
  }
}

总结

这是一个很初级的project,主要的是通过active类的增删,再结合flex布局来实现。

参考官方例子:github.com

相关推荐
脑子慢且灵12 小时前
[JavaWeb]模拟一个简易的Tomcat服务(Servlet注解)
java·后端·servlet·tomcat·intellij-idea·web
走,板砖去2 天前
WeakMap 应用场景与示例
js
虚伪的空想家2 天前
K8S的dashboard部署与访问
云原生·容器·kubernetes·k8s·web·dashboard
Yvonne爱编码3 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
脑子慢且灵3 天前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
诗人不说梦^3 天前
[RootersCTF2019]I_<3_Flask
web·ctf
小天呐5 天前
qiankun 微前端接入实战
前端·js·微前端
OEC小胖胖5 天前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
借你耳朵说爱你6 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web
诗人不说梦^6 天前
[CISCN2019 总决赛 Day2 Web1]Easyweb
web·ctf