Что эквивалентно эффекту перехода css на html элементах, свойства которых css фактически не меняются?

Question

У меня есть немного html / php, который выглядит следующим образом:

   <div class="row">
    <div class="col-25"><label>Email:</label></div>
    <div class="col-75"><input type="text" id="emailAddress" name="emailAddress" onblur="blurHandler(this)" value="<?=$res[0]['emailAddress']?>" required><span
id="marker_emailAddress"></span><br><span class="notice" id="reply_emailAddress">&nbsp;</span></div>
   </div>

Идея состоит в том, что, когда кто-то фокусируется на вводе, вводит текст (или не делает), затем фокусируется вне ввода он отправляет все, что есть во входе, через fetch api на сервер для обработки php. Ответ отправляется обратно и заполняет два <spans>. Это все работает отлично, однако получение ответа от сервера внезапно появляется на странице, что не совсем элегантно для пользователя.

Я хотел бы получить вывод на экран, который отображает ответ сервера, чтобы показать это, передав его через css эффект transition-property: ease-in-out; transition-duration: 0.5s;. Однако я не могу заставить это работать каким-либо образом, и из того, что я прочитал, похоже, потому что на самом деле нет css изменений для применения эффекта перехода к.

Есть ли какой-то способ, которым я могу создать этот эффект либо с помощью css, либо с помощью чего-то еще, чтобы выводить изображение на экран более эстетично c способом?

Заранее спасибо.

Answer 1

Я сделал эталонную реализацию, которая демонстрирует идею. Идея состоит в том, чтобы дать вашему span класс при загрузке данных, которые изменяют анимируемое свойство, например opacity, а затем, как только данные поступают, вы удаляете этот класс в go обратно в нормальное состояние.

const span = document.querySelector('.results');
const button = document.querySelector('.run');
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

button.addEventListener('click', () => {
  span.classList.toggle('loading');
  wait(1*1000).then(() => {
    span.innerHTML = Math.random();
    span.classList.toggle('loading');
  })
})

.results {
  height: 30px;
  border: 1px solid;
  transition: opacity 1s;
}
.results.loading {
  opacity: 0;
}

<input type="text">
<div class="results">
  Data will arrive here with a fade in and fade out effect
</div>
<button class="run">Fetch Data</button>

Если вы предпочитаете скрипку - https://jsfiddle.net/ah6xy08j/1/