Question

我需要帮助才能实现此按钮缩放过渡。我在视口的右下角有一个按钮，当它点击/悬停时，它应该缩放以适合整个视口，但是当我使用transform: scale();时，font-size也发生了变化。重要的是使用转换属性，因为我想在移动设备中使用它，并且要在移动设备上实现60fps的动画，我只能使用转换属性，这意味着我无法改变宽度等。

body {
	margin: 0;
}

.wrapper {
	width: 100%;
	height: 100vh;
	background: #fff;
	position: relative;
}

.wrapper button {
  border: 0;
  width: 100px;
  height: 40px;
  transition: .4s ease all;
  outline: none;
}

.wrapper button:hover {
	width: 100%;
  height: 100vh;
}

<body>
    <div class="wrapper">
        <button>Saving...</button>
    </div>
</body>

PS：我的代码片段只是一个虚拟代码，而不是有效的代码

Answer 1

如果您担心平滑度，请使用requestAnimationFrame，该速度以60 fps（或屏幕的刷新率）运行。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

只要您准备好更新自己的方法，就应该调用此方法屏幕上的动画。这将要求您的动画功能是在浏览器执行下一次重绘之前调用。的数量回调通常为每秒60次，但通常会与根据W3C建议，在大多数网络浏览器中显示刷新率。

以下是MDN的一个示例：

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

变换缩放按钮以适合视口而不更改其字体大小

1 个答案: