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

相关推荐
小天呐1 天前
qiankun 微前端接入实战
前端·js·微前端
OEC小胖胖2 天前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
借你耳朵说爱你2 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web
诗人不说梦^3 天前
[CISCN2019 总决赛 Day2 Web1]Easyweb
web·ctf
OEC小胖胖3 天前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
OEC小胖胖3 天前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
练习时长两年半的Java练习生(升级中)5 天前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
科技树支点5 天前
无GC的Java创新设计思路:作用域引用式自动内存管理
java·python·go·web·编程语言·编译器
OEC小胖胖6 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖6 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web