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

Question

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

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

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

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 ），都会在查询时返回当前值。