reactjs - 如何在不使用固定 CSS 的情况下更改 React JS 中的 Swiper 高度或滑动宽度

Question

我有一个纸牌游戏，玩家从一副牌中选择一张牌添加到第二副牌中。按下事件卡上的按钮会将其移动到另一副牌，然后使其处于事件状态。活跃的甲板在聚焦时应该更大，而非活跃的则最小化，如下所示:

我已经在 SwiperJS 和 React-Swiper 中使用 Swiper Coverflow 效果实现了它，但在任何一种情况下，高度都与 .swiper-slide 相关联。 CSS 类。此类的宽度设置为固定大小，这将驱动 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 类来实现相同的交互？
Example Sandbox

Answer 1

我会用 transform: scale(0.3)在父 (Deck) 上并将滑块的宽度保持在 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;
}

这是我的 sandbox随着效果过渡。