如何在不使用固定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)，并将滑块的宽度保持在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。

Answer 2

如果你想改变“卡片组”的大小并保持平滑的过渡效果，我想你可以使用scale()转换函数，这也是一个CSS解决方案。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#examples

如果你把它和CSS转换结合起来，你就可以达到你提到的效果。

这是一篇来自thoughtbot.com的博客文章，深入探讨了如何使用scale()和CSS转换：https://thoughtbot.com/blog/transitions-and-transforms