Question

如果我在Chrome中使用以下代码，它将按预期运行。在Safari（v13.1.1）中，它先转换宽度并进行y-平移，然后将x-平移跳转到适当位置。我期望所有3个属性都能像在Chrome中一样平稳过渡。

button = document.querySelector('.button')
block = document.querySelector('.block')

button.addEventListener('click', () => {
  block.classList.toggle('active');
});

.block {
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.active {
  top: 100%;
  transform: translate(-50%, -40px);
  width: 40%;
}

<div class="button">Click me</div>
<div class="block"></div>

Answer 1

虽然我无法向您说明Safari为什么如此行事（尽管我可以想象，由于translateX的值位于%中-基于width-抛弃并等待后者处于最终状态，然后对前者进行动画处理），我可以进行一些调整（在macOS 10.15上的Safari，Chrome和Firefox上进行了测试）来提供修复。

通过完全删除width属性，并为left和right属性设置动画（仅使用translateY），可以达到相同的效果。

您的初始状态是一个块居中，占据了宽度50%；在这里，我们让宽度由left的{{1}}和right决定，剩下的25%为宽度。

50%已简化为仅影响transform — translateY的值保持不变。

在您处于活动状态时，我们将top和left的值分别增加到right，总计为30%，宽度为60%，和以前一样。

40%

button = document.querySelector('.button')
block = document.querySelector('.block')

button.addEventListener('click', () => {
  block.classList.toggle('active');
});

.block {
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
}

.active {
  top: 100%;
  left: 30%;
  right: 30%;
  transform: translateY(-40px);
}

我希望这会有所帮助，并随时询问您是否需要更多说明！

可能值得研究Webkit Bug跟踪器，以查看是否已报告此错误。

Safari中出现过渡行为的奇怪行为

1 个答案: