Question

我想请求有关CSS过渡的帮助，但是当我使用ajax召回更新页面时，该过渡无效。

我试着解释一下：

我定义了一个指南针CSS对象和这个指南针的箭头，它应该像风一样在罗盘中定向（风向每秒更新一次）。

我创建了一个CSS对象，箭头会随着过渡效果慢慢移动到初始位置。然后每秒都有风数据的更新，我使用Ajax调用来更新页面。

考虑windDirUpdater函数返回更新的风向（json ['now']）。箭头更新位置但没有过渡。请问有人帮帮我吗？

以下是我现在用于定义CSS对象和ajax召回的代码部分。谢谢法比奥 ruzzi.f@gmail.com

</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>

Answer 1

正如我上面评论的那样，问题是因为你正在改变整个元素，因此没有更多的方法可以进行转换。相反，你应该只是改变类并保留元素。

您可以像这样更新您的成功功能：

success : function (json) {
    $("#nowDirDiv .arrow").attr('class','arrow '+json['now']);
}

此外，您的CSS可以简化为：

.compass .arrow {
    transition: transform 3s;
}
.compass .arrow.nne {
    transform: rotate(22.5deg);
}
.compass .arrow.ne {
    transform: rotate(45deg);
}

.compass .arrow.ene {
    transform: rotate(67.5deg);
}

.compass .arrow.e {
    transform: rotate(90deg);
}

用ajax调用更新了css转换

1 个答案: