Как исправить непрозрачность 0 и трансформировать на мобильном с aos.js? - PullRequest
Новая
       38

Как исправить непрозрачность 0 и трансформировать на мобильном с aos.js?

2 голосов
/ 16 апреля 2019

Я использую AOS.js для анимации при прокрутке в NUXT.AOS отключил анимацию на мобильном устройстве, но некоторые блоки в v-for загружаются с 0 непрозрачностью и преобразуются.В этих блоках есть пользовательские CSS-всплывающие переходы.

Я пытаюсь использовать обертку для aos и анимировать только его, но это не работает.не знаю почему, но только этот блок получает data-aos = "затухание" на мобильном телефоне 

<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;
    }
  }
}

Я не хочу прозрачности и преобразования на мобильном телефоне

...