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

Question

我有一个纸牌游戏，玩家可以从一副牌中选择一张牌添加到另一副牌中。按下活动卡上的按钮会将其移动到另一副牌，然后将其激活。活跃的甲板在聚焦时应该更大，而不活跃的甲板像这样最小化：

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

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 class 来实现相同的交互？

Example Sandbox

Answer 1

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

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

如果将其与 CSS 过渡相结合，您可以达到您提到的效果。

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

Answer 2

我会在父级 (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;
}

这是我的 sandbox 效果转换。

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

How to change the Swiper height or slide width in React JS without using fixed CSS

reactjs

react-hooks

swiper

swiperjs

react-swiper