如何在 JavaScript 中重新启动网站时创建动画？ （请不要使用 jQuery）

Question

我正在开发一个植物图集网站。它使用数据库，因此一些代码在 php 中。 我试图在我的网站重新加载时制作一个转换：缩放（）动画，经过几个小时的失败后，我转向你们。

这是我的代码：

PHP 和 CSS：

<style>
<?php
function backgroundSet($ID){
    global $conn;
    $row = mysqli_fetch_array(mysqli_query($conn, "select image from table where plant_ID='$ID';"));
    echo "#zdj$ID{
            background-image: url('../images/subpages/".$row['image']."');
            transform: scale(0.9);
            transition: transform 1s;
        }
        #zdj$ID .load {
            transform: scale(1);
            transition: transform 1s
        }
        ";
    }
    foreach($datas as $i){
        backgroundSet($i['plant_id']);
    }
?>
</style>
<?php
function Div($ID){
    global $conn;
    $row = mysqli_fetch_array(mysqli_query($conn, "select plantName, plantName_Latin, image from table where plant_ID='$ID';"));
    echo "<div id='zdj$ID' class='obrazki'>
    <span class='Efekt'>
    <span id='name'>".$row['plantName']."</span><span id='rest'><br/>Lat.".$row['plantName_Latin']."";
    echo "</span>";
    echo "</span>";
     echo "</div>";
}
?>

Javascript：

<script type="text/javascript">
        function loadVar(ID){
            var loadZdj = document.getElementById('zdj' + ID);
            }
        
        function load(){
            var load = document.getElementsByClassName('obrazki');
            for(let i=0; i > load.length; i++;){
                loadVar(i);
                loadZdj.classList.toggle('load');
            }
        }
        load();

        
        
    </script>

PHP 很好，它根据数据库生成 div，但 javascript 根本不起作用。 它不会发出任何错误。我希望有好心人能解决我的问题 c:

Answer 1

让我们解决一些问题：

        function loadVar(ID){
               return document.getElementById('zdj' + ID);
            }
        
        function load(){
            var load = document.getElementsByClassName('obrazki');
            for(let i=0; i < load.length; i++;){
                let loadZdj = loadVar(i);
                loadZdj.classList.toggle('load');
            }
        }

修复错误：

• loadVar

  需要返回找到的元素而不是将其分配给局部变量

• i < load.length

  是

  for

  循环的正确停止条件，因为每次循环都会检查它是否仍然正确，并且当条件停止为真时循环结束
• 您需要在您打算使用它的函数范围内创建

  loadZdj