Получить текущее значение свойства CSS во время перехода в JavaScript

Question

Я хотел бы иметь возможность прочитать значение свойства CSS в середине перехода, прежде чем он будет полностью выполнен.Это возможно?Так что, если во время перехода от 0% до 100% я должен был проверить на полпути, могу ли я увидеть его на 50%?

Answer 1

Возможно ли получить текущее свойство css во время перехода в 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, но похоже, что вы можете получить текущую высоту CSS черезJS.

Я не могу вспомнить причину, по которой браузер не будет сообщать об изменении стилей в DOM во время перехода CSS.

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- состояния:

Вычисленное свойство свойства со временем переходит от старого значения к новому.Поэтому, если скрипт запрашивает вычисленное значение свойства (или других данных, зависящих от него) во время его перехода, он увидит промежуточное значение, представляющее текущее анимированное значение свойства.

_{(Шляпа для https://stackoverflow.com/users/27862/user123444555621 за их комментарий, указывающий на соответствующий отрывок спецификации.)}