javascript - 在 JavaScript 转换期间获取当前 CSS 属性值

Question

我希望能够在过渡完全执行之前在过渡过程中读取 CSS 属性的值。那可能吗？因此，如果在从 0% 到 100% 的过渡期间，我要在中途检查，是否可以在 50% 时看到它？

Answer 1

Is it possible to get the current css property during a transition in JavaScript?

是

var timer;

function test(e) {
    var $this;
    $this = $(this);
    timer = setInterval(function () {
        console.log($this.height());
    }, 500);
}
function untest(e) {
    clearInterval(timer);
}

$('div').mouseenter(test).mouseleave(untest);

div
{
    transition: height 10s;
    -moz-transition: height 10s;
    -webkit-transition: height 10s;
    width: 100px;
    height: 100px;
    background-color: #00F;
}

div:hover
{
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

到目前为止，我只测试了 firefox 和 chrome，但看起来您可以通过 JS 获取当前的 CSS 高度。

我想不出为什么浏览器不会在 CSS 转换期间向 DOM 报告样式更改的原因。