D3结合Swiper实现一个选中动画

微信公众号：  [大前端驿站]
关注大前端驿站。问题或建议，欢迎公众号留言。 这是我参与11月更文挑战的第1天，活动详情查看：11月更文挑战

最近比较忙，一直没时间更新掘金的文章，跟大家说声抱歉！前段时间写的关于echarts的文章# 90%的前端都不会的echarts进阶操作，不信？收获了不少同学的好评和鼓励，真是非常感谢大家，谢谢！！！

借着这次掘金的11月活动继续更文，希望11月份能坚持写作！

需求

最近接到一个项目，其中有一个小需求我觉得可以稍微沉淀一下，首先是d3.js的简单应用，还有就是swiper的调试费了一定的时间

大致需求

1. 显示一排不定数量的立体密集架，超过一屏需要可以左右点击移动密集架
2. 点击某一个密集架可以选中获取当前状态，选中有向上移动的动画，取消选中回位

需求分析

需求一首选swiper用来控制，点击和滑动效果都支持，需求二动画方式也有很多，但这里我选择使用d3.js，d3是一套非常好用的js工具，可以应用到很多场景，未来如果有时间的话给大家整理一篇入门文章

实现

创建html引入d3.js和swiper.css和swiper.js

<script src="../../js/d3.js"></script>
<link rel="stylesheet" href="../package/swiper-bundle.min.css">
<script src="../package/swiper-bundle.min.js"></script>

这里需要注意swiper好像有挺多版本的，我这边使用的是bundle的压缩版本

dom编写

<div class="swiper-container">
  <div class="boxs swiper-wrapper">
    <div class="box swiper-slide">Slide 1</div>
    <div class="box swiper-slide">Slide 2</div>
    <div class="box swiper-slide">Slide 3</div>
    <div class="box swiper-slide">Slide 4</div>
    <div class="box swiper-slide">Slide 5</div>
    <div class="box swiper-slide">Slide 6</div>
    <div class="box swiper-slide">Slide 7</div>
    <div class="box swiper-slide">Slide 8</div>
    <div class="box swiper-slide">Slide 9</div>
    <div class="box swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

css编写

<style>
  body{
    margin: 0;
    padding: 0;
  }
  .swiper-container{
    height: 100vh;
    width: 80vw;
    margin: 0 10vw;
    overflow: hidden;
  }

  .boxs{
    height: 100vh;
    width: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
  }

  .box{
    margin: 0 10px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    width: 130px  !important;
    border: 1px solid red;
    cursor: pointer;
  }

  .selected{
    border: 1px solid green;
  }
</style>

js编写之创建swiper

var mySwiper = new Swiper ('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  // centeredSlides: true,
  breakpoints: {
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 5,
      spaceBetween: 50,
    },
  },
  
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

js编写之创建d3实现选中动画

document.querySelectorAll('.box').forEach(item => {
  item.addEventListener('click', () => {
    const isSelected = Array.from(item.classList).includes('selected')
    const preSelected = d3.select('.selected')
    preSelected.style('margin-top', '-100px').transition().duration(500).style('margin-top', '0px')
    const preSelectedDom = document.querySelector('.selected')
    preSelectedDom?.classList.remove('selected')
    if (isSelected) return
    item.classList.add('selected')
    const currentSelected = d3.select('.selected')
    currentSelected.style('margin-top', '0px').transition().duration(500).style('margin-top', '-100px')
  })
})

实现效果

~~ 感谢观看

【分享、点赞、在看】三连吧，让更多的人加入我们