CSS动画。过渡适用于所有其他时间，但不适用于第一次

Question

我正在尝试制作一个示例，在该示例中，当用户单击窗口时，圆（div）会过渡到该位置。 但是，它不适用于首次点击，但对所有其他点击均无效。 所以我想知道它是做什么的。

<!doctype html>
<html>
<head>
<title>Hover</title>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="CSS/mystyles.css" >

</head>
<body>
<div id = "divGroup" class = 'group'>
</div>
<script src="JS/code.js"></script>
</body>
</html>

javascript（我正在使用javascript接收值并定义新值：

var divGroup = document.getElementById("divGroup");

window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}

CSS：

#divGroup {
width: 50px;
height:50px;
background-color:lightblue;
border-radius:50%;
position: absolute;
transition: all 0.5s;
}

Answer 1

您应该在CSS中为#divGroup添加初始的left和top值

 var divGroup = document.getElementById("divGroup"); window.onclick = function(evt) { divGroup.style.left = (evt.clientX - 25) + "px"; divGroup.style.top = (evt.clientY - 25) + "px"; }

 #divGroup { width: 50px; height: 50px; background-color: lightblue; border-radius: 50%; position: absolute; transition: all 0.5s; left: 0; top: 0; }

 <div id="divGroup" class='group'>

CSS动画。过渡适用于所有其他时间，但不适用于第一次

问题描述

1 个解决方案

解决方案1
4 已采纳 2019-01-23 09:21:09

CSS动画。 过渡适用于所有其他时间，但不适用于第一次

问题描述

1 个解决方案

解决方案1 4 已采纳 2019-01-23 09:21:09

CSS动画。过渡适用于所有其他时间，但不适用于第一次

解决方案1
4 已采纳 2019-01-23 09:21:09