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中为for i, (x, y) in enumerate(zip(df1.columns, df2.columns)): print(i, x, y)添加初始left和top

#divGroup

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;
}

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

1 个答案: