有没有办法暂停中途的CSS过渡？

Question

实际上这个主题很有说服力。但为了澄清，我很好奇几件事：

1. 有没有办法 - 不是禁用 - 而是暂停属性转换？ （然后 - 也许恢复它。）

2. 有没有办法在转换过程中读取属性更改（通过JavaScript）？ 例如，如果el的样式为：$(el).height()和el { height: 100px; transition: height 1s; }，那么el:hover { height: 0px; }会在悬停事件发生后0.5秒后返回50（这是草图，请原谅我的语法）。

Answer 1

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

之间切换

animation-play-state:running和animation-play-state:paused https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

2）简短的回答是肯定的。无论您在转换过程中读到哪个属性（比如height），都会在查询时返回当前值。