Блог

Я написал пользовательский модальный режим vue, и он отлично работает на моем компьютере, но на некоторых мобильных устройствах он продолжает сбрасывать кадры. Похоже, это связано с переходами — без этого все работает так, как ожидалось (но выглядит и чувствует себя плохо).

Даже переход с непрозрачностью 1 на непрозрачность 0 в этом случае вызывает задержку. (Любая анимация, вызывающая задержку)

Это действительно простой код, поэтому он должен работать на каждом устройстве — даже устройства среднего класса, такие как Samsung M31, не могут отображать анимацию без задержек. (Даже если переход-это только непрозрачность или масштаб)

Меню.vue

     <Modal :is-open="testModalIsOpen" >
      test1
      test2
      test3
      test4
      test5
    <template #footer>
      <button @click="testModalIsOpen=false">BACK</button>
    </template>
  </Modal>
 

Модальный.vue

 <template>
  <transition name="rpg-modal__transition">
    <div class="rpg-modal" v-if="isOpen" :class="classes">
      <div class="rpg-modal__backdrop"></div>
      <div class="mx-auto rpg-modal__content-wrapper">
        <div class="rpg-modal__box" style="background-color: #0b1b3d">
            <div>
              <div class="rpg-modal__body">
                <slot/>
              </div>
              <div class="rpg-modal__footer d-flex justify-content-end">
                <slot name="footer"/>
              </div>
            </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import {computed} from "@vue/reactivity";

export default {
  name: "Modal",
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    autoPadding: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const classes = computed(() => ({
      'rpg-modal--auto-padding': props.autoPadding
    }));

    return {
      classes,
    };
  }
}
</script>

<style lang="scss">
.rpg-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  $transition-duration: 0.3s;

  amp;__transition {
    amp;-enter-active, amp;-leave-active {
      transition: all $transition-duration;
    }

    amp;-enter-from, amp;-leave-to {
      opacity: 0;
      filter: blur(5px);
      transform: scale(1.3);
    }
  }

  amp;__backdrop {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  amp;__content-wrapper {
    max-width: 64vh;
    margin: auto;
  }

  amp;__box {
    $boxMargin: 13px;
    position: relative;
    margin: $boxMargin;

    max-height: calc(100vh - #{$boxMargin * 2});
    border-radius: 15px;

    background-repeat: no-repeat;
    background-size: 100% 100%;

    box-shadow: #00000073 0 0 10px;
  }

  amp;--auto-padding amp;__body {
    padding: 12px;
  }

  amp;__footer {
    border-top: 1px solid #000000;
    padding: 9px;

    > * {
      margin: .25rem;
    }
  }

  amp;__close {
    font-size: 1.5rem;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;

    position: absolute;
    z-index: 20;
    background-color: rgb(62 62 62);
    box-shadow: #00000052 2px 2px 5px;
    color: white;
    height: 30px;
    width: 30px;
    padding: 0 0 4px;
    border-radius: 50px;
    border: none;
    right: 17px;
    top: 17px;
    transition: background-color 200ms;

    amp;:hover {
      background-color: #9f3e3e;
    }
  }
}
</style>
 

Надеюсь, кто-нибудь сможет помочь и спасибо за любые ответы!

Вы пробовали свойство изменения воли?

Свойство will-change в CSS оптимизирует анимацию, позволяя браузеру знать, какими свойствами и элементами только предстоит управлять, что потенциально повышает производительность этой конкретной операции.
отсюда

Итак, попробуйте это:

 .rpg-modal{
  will-change: transform, opacity, filter;
}
 

Кроме того, установите начальное значение модала, непрозрачность:0 и другие…