css переход обновлен с помощью вызова ajax

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

Я пытаюсь объяснить:

Я определил объект CSS компаса и стрелку этого компаса, которые должны быть ориентированы в компасе как ветер (направление ветра обновляется каждую секунду).

Я создал объект CSS, и стрелка медленно перемещается в исходное положение с эффектом перехода. Затем каждую секунду происходит обновление данных о ветре, и я использую Ajax-вызов для обновления страницы.

Учтите, что функция windDirUpdater возвращает обновленное направление ветра (json [‘now’]). Стрелка обновляет положение, но без перехода. Кто-нибудь может мне помочь, пожалуйста?

Ниже приведена часть кода, которую я сейчас использую для определения объекта CSS и вызова ajax.
Спасибо
Fabio
[email protected]

</style>

<table style="width:98%;margin:0 auto">

<tr>

<td>

<div class="compass" id="nowDirDiv">

<div class="direction">

<p style="font-size:1.2em"><?php echo $direction['nowwind']?> <?php echo unitFormatter($displayWindUnits)?><span><?php echo $direction['nowdir']?>° (<?php echo $direction['nowdirabb']?>) </span></p>

</div>

<div class="arrow x<?php echo $direction['nowdir']?>"></div>

</div></td>
</tr><script>
windDirupdater();

setInterval(function(){ windDirupdater(); }, (1*1000));function windDirupdater(){

$.ajax({

url : "homepage/blocks/windDir/windDirUpdater.php",

dataType : 'json',

success : function (json) {

html = '<div class="direction"><p style="font-size:1.2em">'+json['nowwind']+' <?php echo unitFormatter($displayWindUnits)?><span>'+json['nowdir']+'° ('+json['nowdirabb']+')'+'</span></p></div><div class="arrow x'+json['nowdir']+'"></div>';
$("#nowDirDiv").html(html);}

})

}</script>