我正在用翻译移动元素。在Chrome,Firefox,IE,Old Edge

问题描述 投票:0回答:1
codepen

上使用):

.parent { height: 50px; background-color: blue; padding: 10px; } .child { background-color: yellow; padding: 10px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .child.move { transform: translateY(-150%); padding: 0; /* If 10px: no bug */ } <br><br><br> <div class="parent"> <div class="child" onclick="this.classList.toggle('move')">Click me</div> </div>

我在
Webkitbugtracker
.
中找不到答案。
你知道一些解决方法吗?

其他堆栈溢出相关的问题:

CSS变换 +宽度 +左 +顶级过渡跳跃在Safari浏览器上 safari(9.1)


的转换和大小既变换又大小。

用CSS过渡引起的助攻和填充的动画造成跳跃动画
  • 您可以添加:transition-delay: 1ms;将迫使填充属性在
  • transform
  • 过渡之前。 https://codepen.io/konstantin/pen/qbwjjjq
css safari webkit css-transitions
1个回答
6
投票

© www.soinside.com 2019 - 2024. All rights reserved.