这是我第一次在这里提问，所以请告诉我我做错了什么。
因此，我正在尝试制作一个网站，在该网站上，我的按钮会在页面加载时飞入，然后当我将鼠标悬停在上方时，它们会弹出(缩放得更大)。已经 2 天了，我仍然找不到如何做的答案。当我使用“向前”填充模式的动画时，悬停在动画之后不起作用。当我使用转换时，它不会在页面加载时触发。此外，每个按钮飞入时彼此之间会有 0.06 秒的延迟。
谢谢
代码:(这是我到目前为止得到的。我使用 java 脚本生成按钮并计算它们的初始位置。)
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title id="title">Jack's Desk</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.backgroundImg {
position: absolute;
width: 100%;
height: auto;
}
.mainDiv {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mainDiv" class="mainDiv">
</div>
<script style="">
const OPACITY = 0.8;
const TRANSITION_TIME = .4;
const ANIMATION_TIME = 1.1;
//For the fly in function.
var index = 0;
var delay = 0;
for (var i = 0; i < 60; i++) {
var theButton = document.createElement("Button");
document.getElementById("mainDiv").appendChild(theButton);
theButton.innerText = "Hola number " + i;
theButton.style.position = "fixed";
theButton.style.left = Math.random() * window.innerWidth + "px";
theButton.style.top = Math.random() * window.innerHeight + "px";
flyIn(theButton, 0.06);
}
function flyIn(element, additionalDelay) {
var elementTop = element.offsetTop;
var elementLeft = element.offsetLeft;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
var newTop = - Math.sin(angle) * 390;
var newLeft = Math.cos(angle) * 390;
var newStyle = document.createElement("Style");
newStyle.type = "text/css";
newStyle.innerHTML = ".label" + index
+ "{opacity:0; -webkit-animation: flyin" + index + " 1.2s forwards; -webkit-animation-delay:" + delay + "s}"
+ "\n.label" + index + ":hover {-webkit-transform: scale(1.5, 1.5); opacity: 1.0;}"
+ "\n@keyframes flyin" + index + "{\nfrom{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(3, 3);\n opacity: 0}"
+ "\nto{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY +"\n}"
;
document.getElementsByTagName("head")[0].appendChild(newStyle);
element.className = "label" + index;
delay += additionalDelay;
index++;
}
</script>
</body>
</html>最佳答案
所以我发现了一个非常肮脏的解决方法(抱歉语言不通)是将动画设置为向后。但是这种方式不允许我对动画有任何延迟，因为按钮将在动画开始之前显示。我想我别无选择。不能太贪心。 :(
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title id="title">Jack's Desk</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-color: transparent;
}
.backgroundImg {
position: absolute;
width: 100%;
height: auto;
}
.mainDiv {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mainDiv" class="mainDiv">
</div>
<script style="">
const OPACITY = 0.8;
const TRANSITION_TIME = .4;
const ANIMATION_TIME = 1.1;
//For the fly in function.
var index = 0;
var delay = 0;
for (var i = 0; i < 60; i++) {
var theLabel = document.createElement("Button");
document.getElementById("mainDiv").appendChild(theLabel);
theLabel.innerText = "Hola number " + i;
theLabel.style.position = "fixed";
theLabel.style.left = Math.random() * window.innerWidth + "px";
theLabel.style.top = Math.random() * window.innerHeight + "px";
flyIn(theLabel, 0.06);
}
function flyIn(element, additionalDelay) {
var elementTop = element.offsetTop;
var elementLeft = element.offsetLeft;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
var newTop = - Math.sin(angle) * 390;
var newLeft = Math.cos(angle) * 390;
var newStyle = document.createElement("Style");
newStyle.type = "text/css";
newStyle.innerHTML = ".label" + index
+ "{opacity: " + OPACITY + ";-webkit-transition: all " + TRANSITION_TIME + "s;\n"
+ "-webkit-animation: flyin" + index + " " + ANIMATION_TIME + "2s reverse;}"
+ "\n.label" + index + ":hover {-webkit-transform: scale(1.5, 1.5); opacity: 1.0;}"
+ "\n@keyframes flyin" + index + "{\n100%{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(3, 3);\n opacity: 0}"
+ "\n0%{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}"
;
document.getElementsByTagName("head")[0].appendChild(newStyle);
element.className = "label" + index;
//element.innerText = parseInt(angle * 180 / Math.PI) + ", (" + newLeft + ", " + newTop +")";
delay += additionalDelay;
index++;
}
</script>
</body>
</html>关于javascript - 动画和过渡同时进行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32292063/