javascript - 使多个背靠背CSS过渡平滑无缝，而不是生涩或断断续续

Question

Closed. This question needs to be more focused。它当前不接受答案。












想改善这个问题吗？更新问题，使其仅关注 editing this post的一个问题。

6年前关闭。



Improve this question




当过渡的CSS属性前后更改时，尤其是当下一个属性更改在任何先前的过渡完成之前开始时，结果是整体效果的困惑感(因为下一个过渡会停止前一个过渡并开始慢慢地)。在快速属性更改期间删除过渡(或将过渡临时设置为0s)可能也可能不够平滑。我真正想要的是一种从一个过渡无缝过渡到另一个过渡的不错的方法，尤其是在一个过渡尚未完全完成之前。

用例:通过JavaScript快速更改属性时

假设某个元素正在通过鼠标或触摸拖动。浏览器会在方便时触发这些鼠标/触摸事件，并且浏览器并不总是及时触发此类事件。通常情况下，确实触发得很顺利，但有时两个事件触发之间可能会有明显的延迟。取决于您是否在元素上设置了过渡效果，所产生的效果可能是生涩的或不稳定的(请参阅“困境”)。理想情况下，过渡 应该可以使平滑整体效果，如果只有CSS属性可以告诉浏览器以与当前任何动画过渡相同的速度继续进行后续过渡，而不是在开始之前停止当前过渡，则 下一个。不过，我还没有遇到过这样的酒店。

具体例子

以一个元素在屏幕上移动为例(为简单起见)。假设有一个按钮触发元素在屏幕上指定的开始和结束位置之间移动，通过 transition: 1s处理“动画”，然后添加一个类，通过transform属性更改该元素的位置。瞧，该元素从开始到结束位置都经过了“动画处理”。现在说您希望用户也能够从元素的开始位置和结束位置之间拖动或滑动元素。自然地，这可以通过一些JavaScript来处理(目前，可能直到HTML6为止，因为HTML5 draggable属性对于大多数触摸屏/移动设备仍然不起作用)。

因此，您将为鼠标/触摸事件设置事件侦听器，并通过 mousedown / mousemove或 touchstart / touchmove处理可移动元素的转换，并为每次移动设置相关的转换值。然后，当他们放开鼠标或触摸( mouseup或 touchend)时，您将通过删除 mousemove或 touchmove应用的动态样式来完成将元素移至其结束位置(或根据需要将其移回到其起始位置)的操作。事件，并且可能添加一个类，如果满足某些条件，该类会将元素移到其最终位置。

困境

如果在拖动元素时不要将过渡动态设置为0s，则每次更改过渡属性时，如果上一个过渡仍在进行，它将停止在轨迹中，并且新的过渡将从停止点开始，从而导致散乱的效果。

如果在拖动元素时确实将过渡动态设置为0，则当两次事件触发之间有明显的延迟，并且结果是位置发生重大变化时，元素只是立即跳到新位置，而不是平滑地跳到新位置。过渡到新位置，导致断断续续。

解决方案尝试

我已经想到了几种可能的解决方法，但是它们并不是完全理想的。

第一种是观察事件(或其报告的坐标)之间的显着延迟，并通过将动态设置的过渡属性从0更改为将为过渡设置动画的事物做出相应的反应，但可能会在下一次事件触发时立即被取消这将使动态过渡属性改回0s，或者更改元素的位置，并且动态过渡仍从上一个过渡开始设置，从而导致该过渡停止，下一个过渡从当前位置开始。它还为JavaScript代码增加了额外的开销，如果有更好的方法，我也不喜欢。

另一个方法是使用 transition-timing-function: cubic-bezier(0,1,0,1)进行后续转换，这会导致后续转换开始的速度更快，但它们也会更快地结束，这不一定是所希望的。同样，由于过渡属性的变化非常快时，由于明显的卡顿，因此这种方法仍然感觉有些奇怪。至少那是我在Chrome中的经验。当过渡属性的变化速度不太快时(例如，元素在屏幕上的拖动速度较慢)，它看起来更平滑。

还有 this question，为此发布的唯一解决方案也无法使整体效果流畅。该解决方案具有与我上面提到的相同的完全卡顿缺陷，用于快速射击更改以1s的较高持续时间过渡的属性。

如果转换的CSS属性告诉浏览器以相同的速度继续进行后续转换，而不会停止一个过渡或从静止启动另一个过渡，则要简单得多。但是，我还没有找到这样的属性(property)。

如果尚不存在这样的属性，是否有更好的方法来平滑这种快速过渡到过渡属性的更改？

这是一些非常简单的 demo code，不幸的是，它太简单了，无法显示我所说的延迟事件触发，但这至少是一个起点。如果没有得到令人满意的答复，我将尝试制作一个更高级的示例，该示例利用更多的计算能力，以使事件触发延迟更加明显。

最佳答案

当从JavaScript调用CSS过渡时，特别是如果它们需要立即启动时，这会很麻烦。如果您不必在开始动画之前为过渡CSS属性设置新值，它们将非常有用，但是当您这样做时，最终会遇到同步和计时问题。就个人而言，我必须先设置转换值，然后将实际转换的CSS设置到setTimeout()回调内部，以确保转换值首先被保持，这会增加一些延迟并对其进行跳过。

浏览器供应商正在研究更好的方法:http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36。但目前只有Chrome支持。

同时，如果您需要响应动态用户输入来启动新动画，则建议使用requestAnimationFrame。由于它已同步到浏览器的实际刷新周期，因此它的性能远远优于旧的JavaScript动画方法(包括jQuery)。您可以在上面的示例中为初始动画使用过渡，但是在用户以自己的滑动 Action 中断动画的那一刻，将其终止，然后使用requestAnimationFrame切换到JavaScript解决方案。

(对它的非前缀支持始于IE10，FF23，Ch6和Safari 6.1。对于较旧的浏览器，有一个补片将还原为更短的setTimeouts，但其他方法可以正常工作。)

关于javascript - 使多个背靠背CSS过渡平滑无缝，而不是生涩或断断续续，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24182335/

上一篇：javascript - AngularJS 面试问题/挑战

下一篇：javascript - 在angularjs表单验证中提交表单之前显示错误消息

相关文章：

html - 如何使用 css 更改选项卡大小？

css - 是否有必要在 container-fluid block 中添加 .row？

css - 有没有办法用 url() 插入 CSS 变量？

按大因子缩放大数和按小因子缩放小数的算法

javascript - 如果 jQuery 验证失败，JSLint 有什么用

javascript - 在 Web 应用程序中绘制有向无环图 - 只有奇怪的方法可用吗？

CSS transition and transform from hamburger bars --> 点击 X(使用手写笔)

java - 如何实现霍夫变换？

javascript - 将整数转换为时间并相加

javascript - polymer child dom 加载

Answer 1

当从JavaScript调用CSS过渡时，特别是如果它们需要立即启动时，这会很麻烦。如果您不必在开始动画之前为过渡CSS属性设置新值，它们将非常有用，但是当您这样做时，最终会遇到同步和计时问题。就个人而言，我必须先设置转换值，然后将实际转换的CSS设置到setTimeout()回调内部，以确保转换值首先被保持，这会增加一些延迟并对其进行跳过。

浏览器供应商正在研究更好的方法:http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36。但目前只有Chrome支持。

同时，如果您需要响应动态用户输入来启动新动画，则建议使用requestAnimationFrame。由于它已同步到浏览器的实际刷新周期，因此它的性能远远优于旧的JavaScript动画方法(包括jQuery)。您可以在上面的示例中为初始动画使用过渡，但是在用户以自己的滑动 Action 中断动画的那一刻，将其终止，然后使用requestAnimationFrame切换到JavaScript解决方案。

(对它的非前缀支持始于IE10，FF23，Ch6和Safari 6.1。对于较旧的浏览器，有一个补片将还原为更短的setTimeouts，但其他方法可以正常工作。)