如何在另一个零件上使用CSS动画时延迟图像的出现

我正在创建一个网页。在其中，我有移动图像的CSS动画，当您单击这些图像时，带有段落的图像的更大版本会出现在它们的位置。我试图让它使图像和段落的大版本延迟，因此它在其他图像移动后显示。我单独工作，但是当我把它放在一起时，图像和段落的大版本不再延迟，我不知道为什么。这是我的代码：https://jsfiddle.net/rfradkin/eq2h50kg/1/

var click = 0;
function checkClicks(imgs) {
	if(click == 0) {
		setTimeout(function(){ 
			myFunction(imgs);
		}, 10000);
	} else {
		myFunction(imgs);
	}
	click = 1;
}
function myFunction(imgs) {
	var expandImg = document.getElementById("expandedImg");
	expandImg.src = imgs.src;
	var imgParagraph = document.getElementById('img-paragraph');
	imgParagraph.innerHTML = imgs.getAttribute("yeep");
	expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
document.getElementById('column1').classList.add('animate')
document.getElementById('column2').classList.add('animate')
document.getElementById('column3').classList.add('animate')
document.getElementById('column4').classList.add('animate');
}

@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody {
background-color: #EEF0FC;
height: 5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
width: 40%;
padding-top:20px;
padding-left:20px;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 400px;
width: 50%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 7px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 80px;
}
.yeep1 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.yeep2 {
color: purple;
}
.yeep3 {
color: green;
}
.yeep4 {
color: blue;
}
.yeep1::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
#column1 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column2 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column3 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column4 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}

<!-- I'm trying to have the images move to the bottom using a CSS animation after they are clicked. After I do this by adding the code that works for this, the function you wrote stopped working. I can't figure out why. Can you help me?-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<script src='../Javascript/fix.js'></script>
<script src='../Javascript/jquery-3.5.1.min.js'></script>
<title>Projects</title>
</head>
<body class='totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph"></p>
</div>
</div>
<div class="row">
<div class="column" id='column1'>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" yeep="<p class='yeep1'> Parapraph #1 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column2'>
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" yeep="<p class='yeep2'> Parapraph #2 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column3'>
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" yeep="<p class='yeep3'> Parapraph #3 </p>" onclick="myFunction(this);">
</div>
<div class="column" id='column4'>
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" yeep="<p class='yeep4'> Parapraph #4 </p>" onclick="myFunction(this);">
</div>
</div>
</body>
</html>

请看一看。我是编程新手，我能得到的任何帮助都会很有用。谢谢，如果您需要更多信息，请告诉我。

好的，所以快速解释这段代码...我们有 HTML 元素的 onclick 调用函数handleClick并将其传递this又名被单击的 img。

在我们的处理程序中，我们从 src 属性中获取图像的源，以及包含在yeep属性中的 p 元素。然后我们遍历每一列，设置动画的运动，当我们到达最后一列时，我们为动画创建一个变量，并添加一个带有回调的事件处理程序(需要包装在匿名函数中，否则它将无法正常工作(。我们将回调我们的 column4(或最后一个(元素以及 src 和 yeep 属性内容作为参数传递。

动画完成后，将触发回调，然后将较大的图像源和段落内容设置为各自的元素，然后设置其显示以使其可见。

var click = 0;
function checkClicks(imgs) {
	if(click == 0) {
		setTimeout(function(){ 
			myFunction(imgs);
		}, 10000);
	} else {
		myFunction(imgs);
	}
	click = 1;
}
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement");
var animations = {
"animation"      : "animationend",
"OAnimation"     : "oAnimationEnd",
"MozAnimation"   : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
const customCallback = (e, s, y) => {
let p = document.getElementById("img-paragraph");
p.innerHTML = y;
var expImg = document.getElementById("expandedImg");
expImg.src = s;
expImg.parentElement.style.display = "table-cell";
p.style.display = "table-cell";
let ele = document.getElementById("column4");
ele.removeEventListener(window.animationEvent, customCallback);
}
const handleClick = (e) => {
let yeep = e.getAttribute("yeep");
let eleArr = ["column1", "column2", "column3", "column4"];
for (ele in eleArr) {
let thisEle = document.getElementById(eleArr[ele]);
if (thisEle.classList) thisEle.classList.add('animate')
else thisEle.className += " " + "animate";
if (eleArr[ele] === "column4") {
var animationEvent = whichAnimationEvent();
thisEle.addEventListener(animationEvent, () => customCallback(thisEle, e.src, yeep));
}
}
}

@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody {
background-color: #EEF0FC;
height: 5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
width: 40%;
padding-top:20px;
padding-left:20px;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 400px;
width: 50%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 7px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 80px;
}
.yeep1 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.yeep2 {
color: purple;
}
.yeep3 {
color: green;
}
.yeep4 {
color: blue;
}
.yeep1::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
#column1 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column2 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column3 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column4 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}

<!-- I'm trying to have the images move to the bottom using a CSS animation after they are clicked. After I do this by adding the code that works for this, the function you wrote stopped working. I can't figure out why. Can you help me?-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<script src='../Javascript/fix.js'></script>
<script src='../Javascript/jquery-3.5.1.min.js'></script>
<title>Projects</title>
</head>
<body class='totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph"></p>
</div>
</div>
<div class="row">
<div class="column" id='column1'>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" yeep="<p class='yeep1'> Parapraph #1 </p>" onclick="handleClick(this);">
</div>
<div class="column" id='column2'>
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" yeep="<p class='yeep2'> Parapraph #2 </p>" onclick="handleClick(this);">
</div>
<div class="column" id='column3'>
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" yeep="<p class='yeep3'> Parapraph #3 </p>" onclick="handleClick(this);">
</div>
<div class="column" id='column4'>
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" yeep="<p class='yeep4'> Parapraph #4 </p>" onclick="handleClick(this);">
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：