2

我使用 AOS.js 在 NUXT 中滚动动画。AOS 在移动设备上启动了动画，但是 v-中的一些块以 0 不透明度加载并进行了转换。此块具有自定义 css 悬停和过渡。

我尝试对aos使用包装器并只为他设置动画，但它不起作用。不知道为什么，但只有这个块在移动设备上获取 data-aos="fade-down"

<div class="card-wrapper">
      <div
        v-for="(card, index) in cards"
        :key="index"
        class="card"
        :style="card.style"
        data-aos="fade-down"
        :data-aos-delay="index * 100"
        data-aos-once="true"
        data-aos-offset="-200"
      >
        <div class="card-img-wrapper">
          <img :src="card.img" :alt="card.name" class="card-img" />
        </div>
        <h4 class="text-center text-white card-name">{{ card.name }} .    </h4>
      </div>
    </div>

我的 scss 样式

  .card {
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
  &-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px;
  }

  &-img-wrapper {
    &:before {
      content: '';
      width: 100px;
      height: 100px;
      border-radius: 100%;
      background: white;
      display: block;
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 90px);
      transition: 0.4s ease-out;
    }
  }

  &-name {
    margin-top: 70px;
  }

  &-img {
    display: flex;
    margin: auto;
    width: 62px;
    height: 62px;
    transition: 0.6s ease;
    transform: translateZ(100px);
    margin-top: 20px;
  }

  &:hover {
    cursor: pointer;

    & .card-img {
      transform: scale(1.2);
    }

    & .card-img-wrapper:before {
      transform: scale(20);
      transition: 0.4s ease-in;
    }

    & .card-name {
      color: black;
      transform: translateZ(100px);
      transition: 0.4s ease-in;
    }
  }
}

我不想在移动设备上不透明和变换

4

0 回答 0