移动浏览器/视图中的按钮“点击”动画滞后

Posted 2023-03-07

【中文标题】移动浏览器/视图中的按钮“点击”动画滞后

【英文标题】：Button "On click" animation laggy in mobile browsers/views

【发布时间】：2021-09-30 04:39:55

【问题描述】：

我正在 Nuxtjs 中构建 UI，并使用 TailwindCSS 为按钮设置动画。 一切都很顺利，除了这个按钮动画似乎落后于移动视图。 这是一个问题，因为按钮被设计为可以快速单击，这在移动设备上使动画大部分时间都不会运行。 我在 CSS 中使用<meta name="viewport" content="width=device-width, initial-scale=1"> and tried various touch-action` 属性。

这是按钮组件的代码

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

【参考方案1】：

尝试查看这些链接。

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：尝试设置 transform: translateX(0);

我相信这将强制使用 GPU 渲染元素，这可能会使动画更流畅。不是 100% 肯定，但这些文章应该会有所帮助。

【讨论】：

嗯，到目前为止还没有运气。 Tailwind 甚至有一个 transform-gpu 类，但没有变化。