Question

这是我第一次在这里提出问题所以请告诉我我做错了什么。

所以我试图建立一个网站，我有按钮在页面加载时飞入，然后当我将鼠标悬停在鼠标上时它们会弹出（缩放更大）。已经过了2天，我仍然无法找到解决方法。当我使用＆＃34;前进＆＃34;填充模式，悬停在动画后不起作用。当我使用转换时，在页面加载时不会触发转换。此外，每个按钮在飞入时都会有一个.06秒的延迟。

由于

代码:(这是我到目前为止所做的。我使用java脚本生成按钮并计算它们的初始位置。）

＆＃13;

<!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>

＆＃13;

Answer 1

所以我发现一个污秽肮脏的污秽解决方法（抱歉语言）是向后设置动画。但这种方式不允许我对动画有任何延迟，因为按钮将在动画开始之前显示。我想我别无选择。不能太贪心。：（

<!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>

Answer 2

让我知道吗？但我认为这就是你要找的......

// HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section id="main"></section>
</body>
</html>

// JS（index.js）

document.addEventListener("readystatechange", initFly);

function initFly() {
    var main = document.getElementById("main");
    for (var i=0; i < 60; i++){
        //
        var btn = document.createElement("button");
        main.appendChild(btn);
        btn.innerHTML = "Hola number " + i;
        btn.style.left = Math.random() * window.innerWidth + "px";
        btn.style.top = Math.random() * window.innerHeight + "px";
        //
        var eleTop = btn.offsetTop;
        var eleLeft = btn.offsetLeft;
        var centerX = window.innerWidth / 2;
        var centerY = window.innerHeight / 2;
        var angle = Math.atan2(centerY - eleTop, eleLeft - centerX);
        var newTop = Math.sin(angle) * 390;
        var newLeft = - Math.cos(angle) * 390;
        //
        btn.style.transform = "translate("+newLeft+"px,"+newTop+"px)";
        btn.style.opacity = "0.8";  
    }   
}

// CSS（index.css）

body {
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
}
section{
    position: absolute;
    width: 100vw;
    height: 100vh;
}       
button{
    opacity: 0;
    cursor: pointer;
    position: fixed;
    transition-duration: 3s;
    transition-timing-function: ease;
}
button:hover{
    height: 100px;
    width: 100px;
}

动画和过渡同时？

2 个答案: