jquery - Vue v-for 无法在幻灯片中正确渲染阴影

Question

我正在尝试使用 iDangero.us我的 Vue 元素中的 Swiper。除幻灯片中的阴影外，一切正常。每次分页后，阴影会变得越来越大、越来越暗。圆圈结束后，我又回到了第二个幻灯片，阴影再次自行重置为正常状态。

这是插图，发生了什么:

这就是我正在做的:

<template>
  <div class="product-slider">
    <div class="product-slider__wrp swiper-wrapper">
      <product-slide :item="item" v-for="item in items" :key="item.id"/>
    </div>
  <div class="product-slider__pagination"></div>
</div>
</template>



  data() {
    return {

      swiperOptions: {
        vertical: true,
        spaceBetween: 30,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
        }
      },
    };
  },

  mounted(){
    const swiper = new Swiper('.product-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: '.product-slider__pagination',
        clickable: true,
      }
    });
    swiper.slideTo(3, 1000, false)
  },

这是幻灯片组件:

<template>
<div class="product-slider__item swiper-slide">

  <div class="product-slider__img">
    <inner-slick-slider :images="item.imageUrl" :imageTitle="item.title | decrypt"/>
  </div>

  <div class="product-slider__content">
    <span class="product-slider__code"> test </span>
  </div>

</div>
</template>

这是幻灯片组件上的阴影:box-shadow: 4px 13px 30px 1px rgba(112, 137, 249, 0.2);

我尝试了所有我能从谷歌找到的东西。还尝试在更新和更新之前重新渲染等。我做错了什么？非常感谢任何帮助!

Answer 1

Hi, actually the issue is coming because of transition and box-shadow CSS.

在代码中，CSS 应用于所有 div，因此我将其删除并仅在当前处于事件状态的 img 上添加了框阴影。

我在这里添加了框阴影 CSS。

&.swiper-slide-active {
  .blog-slider__img {
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    img {
      opacity: 1;
    transition-delay: .3s;

    }
  }

并从下面的类中删除了框阴影 css。

&__img {
     // width: 40%;
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);

    border-radius: 20px;
    transform: translateX(-80px);

    overflow: hidden;

    &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
      border-radius: 20px;
    opacity: 0.8;
}

这是更新的 codepen 的链接.