有没有办法暂停CSS中间的过渡？ [英] Is there a way to pause CSS transition mid-way?

问题描述

实际上，主题很有说服力。但要澄清，我很好奇几个事情：

Actually the subject is pretty explanatory. But to clarify, I am curious of several things:

1. 有一种方法 - 不禁用 - 过渡？

1. Is there a way - not to disable - but to pause the property transition? (And then - resume it, perhaps).

在转换过程中，有没有办法读取属性更改（通过JavaScript）？
例如，在悬停事件后0.5秒后， $（el）.height（）返回50，如果el的样式为： el {height：100px; transition：height 1s; } 和 el：hover {height：0px;

Is there a way to read property change (by JavaScript) while it's in transition? For instance, will an $(el).height() return 50 after .5 seconds after the hover event, if the styles for el are: el { height: 100px; transition: height 1s; } and el:hover { height: 0px; } (it's a sketch, please pardon my syntax).

推荐答案

1）您可以使用 animation-play-state CSS属性，并在

1) You can use the animation-play-state CSS attribute, and toggle between

animation-play-state：running 和 animation-play-state：paused
https://developer.mozilla.org/en-US/docs/ Web / CSS /动画播放状态

2）简短的答案是肯定的。无论您在转换中途读取的哪个属性（让您说 height ），都会在查询时返回当前值。

2) The short answer is yes. Whichever property you read halfway through your transition (lets say height), will return the current value at the moment queried.

这篇关于有没有办法暂停CSS中间的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！