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

Question

实际上这个主题很有说服力.但澄清一下,我很好奇几件事:

1. 有没有办法 - 不是禁用 - 而是暂停属性转换？(然后 - 或许恢复它).

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

Answer 1

1）您可以使用animation-play-stateCSS属性，并在之间切换

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

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