Блог

Я создаю пользовательский интерфейс в Nuxtjs и анимирую кнопку с помощью TailwindCSS. Все идет гладко, за исключением того, что анимация этой кнопки, похоже, отстает от мобильных представлений. Это проблема, так как кнопка предназначена для быстрого нажатия, из-за чего на мобильных устройствах анимация большую часть времени вообще не запускается. Я использую <meta name="viewport" content="width=device-width, initial-scale=1"> and tried various свойства сенсорного действия в CSS.

Это код для компонента кнопки

 <template>
  <button
    class="p-1 bg-gray-800 ring-2 ring-gray-800 ring-offset-4 rounded-full shadow-md text-gray-200 transition-all transform linear duration-75 active:text-gray-100 active:shadow active:scale-95 hover:scale-105 hover:shadow-lg"
    :class="[fullColor]"
  >
    <slot></slot>
  </button>
</template>
 

Попробуйте проверить эти ссылки.

https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/
https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions

TLDR: попробуйте установить преобразование: translateX(0);

Я считаю, что это заставит визуализировать элемент с помощью графического процессора, что может сделать анимацию более плавной. Не уверен на 100%, но эти статьи должны помочь.