2

我的程序/应用程序有三个单独的文件：html、CSS 和 JavaScript。我需要使用 CSS 动画将对象移动到某个位置（不允许使用 JavaScript ）。但是，对象的目的地发生了变化，这就是我使用 JavaScript 获取当前坐标的原因： 

var x = $('#correct > span:empty').offset();

现在，我可以在 JavaScript 中使用获取的坐标，使用x.left和x.top。但是，因为我只允许使用 CSS 动画，所以我需要在我的 CSS 文件中使用坐标。这就是为什么我需要你的帮助。
有可能这样做吗？如果是这样，怎么做？这是我在我的 CSS 文件中为对象（跨度）编写的内容：

p > span {
   background-color: white;
   box-shadow: inset 0 0 10px #999;
   height: 2.5em;
   width: 2.5em;
   display: inline-block;
   margin: 5px;
   border-radius: 10px;
   text-align: center;
   line-height: 2.5em;
   vertical-align: middle;
}

现在，对象跨度必须以动画方式移动到“#correct > span:empty”（我已经用 JS 获得了该对象的坐标）。
我曾想过使用transition，但我仍然不知道是否或如何使用坐标。
你能帮我么？

4

1 回答 1

0

正如 Barmar 所说，我相信动态更改 CSS 将是您最好的选择。其他一些选择是使用服务器端 PHP。如果你已经计算了你的 javascript 客户端，你可以使用 AJAX 来请求get_css.php?location=<your_wanted location>

服务器端，你可以回显你的 CSS，加上参数$_GET['location'].

编辑：我意识到我的回答真的很模糊。让我给你举个例子：

假设我想将一个段落向左移动一个未知量，由用户给出；使用过渡。由于不允许使用 Javascript，因此我使用 PHP 来即时更改响应到页面的 CSS。请参阅此处的示例。代码如下所示：

索引.html：

<!DOCTYPE html>
<html>

        <head>

                <title>EXAMPLE</title>

        </head>

        <body>

                <form action="animate.php" method="post">

                        <input type="text" name="amount" placeholder="Put a number (1-100) here!" style="min-width: 40%;"></input>
                        <input type="submit" value="Submit">

                </form>

        </body>

</html>

动画.php：

<?php

    $amount = $_POST['amount'];

?>


<!DOCTYPE html>
<html>

        <head>

        <title>EXAMPLE</title>

        <style>

            #moveMe{

                position: absolute;
                top: 0;
                left: <?php echo $amount ?>%;
                animation-name: moveLeft;
                animation-duration: 4s;

            }

            @keyframes moveLeft{

                from{
                    left: 0%;
                }
                to{
                    left: <?php echo $amount ?>%;
                }

            }

        </style>

        </head>

        <body>

        <p id="moveMe">I'm moving!</p>

        </body>

</html>
于 2018-03-31T18:12:33.787 回答