小编Mat*_* E.的帖子

我有一个纸牌游戏，玩家从一副牌中选择一张牌添加到第二副牌中。按下活动卡上的按钮会将其移动到另一副牌上，然后将其激活。当焦点对准时，活动的牌组应该更大，而非活动的牌组则最小化，如下所示：

我已经在 SwiperJS 和 React-Swiper 中使用 Swiper Coverflow 效果实现了它，但无论哪种情况，高度都与 CSS 类相关.swiper-slide。此类的宽度设置为固定大小，该大小决定了 Swiper 其余部分的渲染方式。似乎更改幻灯片宽度（以及由此产生的 Swiper 高度）的唯一方法是根据状态将固定宽度类应用于幻灯片。

JSX：

 <SwiperSlide
            key={index}
            className={
              props.selected
                ? "swiper-fixed-width-300 "
                : "swiper-fixed-width-100 "
            }
          >

CSS：

.swiper-fixed-width-100 {
  width: 100px;
}

.swiper-fixed-width-300 {
  width: 300px;
}

然而，这种方法没有像其他交互那样的缓动或过渡，所以感觉太突然了。我想找到一种使用 Swiper API 函数来完成相同操作的方法。如何使用 API 或不操作 CSS 类来实现相同的交互？

沙盒示例