是

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＆amp; chrome，但似乎你可以通过JS获得当前的CSS高度。

我无法想到在CSS过渡期间浏览器不会报告DOM样式的变化的原因。

Answer 2

是的，有可能。 getComputedStyle返回的对象的相应属性将在过渡过程中逐渐变化，如本演示所示：

const box = document.getElementById('box'),
      turnBlueButton = document.getElementById('turnblue'),
      turnPinkButton = document.getElementById('turnpink'),
      computedStyleValueSpan = document.getElementById('computedstylevalue');
      
turnBlueButton.onclick = () => {
  box.classList.add('blue');
  box.classList.remove('pink');
}
turnPinkButton.onclick = () => {
  box.classList.add('pink');
  box.classList.remove('blue');
}

const computedStyleObj = getComputedStyle(box);

setInterval(() => {
  computedStyleValueSpan.textContent = computedStyleObj.backgroundColor;
}, 50);

#box {
  width:50px;
  height:50px;
  transition: background-color 10s;
}
.pink {
  background: pink;
}
.blue {
  background: blue;
}

<div id="box" class="pink"></div>

<p>
  <code>getComputedStyle(box).backgroundColor:</code>
  <code><span id="computedstylevalue"></span></code>
</p>

<button id="turnblue">Turn blue</button>
<button id="turnpink">Turn pink</button>

此行为是规范要求的。 https://www.w3.org/TR/css-transitions-1/#transitions-声明：

属性的computed value随时间从旧值过渡到新值。因此，如果脚本在过渡时查询属性（或其他取决于该属性的数据）的计算值，它将看到一个中间值，该值代表该属性的当前动画值。

_{（https://stackoverflow.com/users/27862/user123444555621的提示，指出了相关的规格段落。）}

在JavaScript过渡期间获取当前CSS属性值

2 个答案:

是