如何在 React JS 中更改 Swiper 高度或滑动宽度而不使用固定 CSS

Question

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

我已经在 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 类来实现相同的交互？

沙盒示例

Answer 1

我会在父级（Deck）上使用transform: scale(0.3)并将滑块的宽度保持在 300px。

JSX（Deck.js）：

<div
    className={
        props.selected 
        ? "Deck Deck-selected" 
        : "Deck Deck-unselected"
    }
>

<SwiperSlide key={index} className="swiper-fixed-width-300">

CSS：

.Deck {
  transition: transform 0.3s ease;
}
.Deck-selected {
  transform: scale(1);
}
.Deck-unselected {
  transform: scale(0.3);
}

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

这是我的沙箱，带有效果过渡。