javascript - CSS:当 image1 动画不正确时，图像集会移动，而它们应该留在原处

Question

我正在构建一个 CSS 灯箱画廊。我想使用 CSS 过渡动画美化其操作的一部分。我正在尝试做的是:当您将鼠标悬停在基本图像上时，它会以“脉冲”动画，让您知道您可以与之互动。当您单击它时，它会旋转、缩放并向查看者淡出，就好像它正在变成信息 block ，该信息 block 将淡入本应出现的灯箱中。出现的盒子不是纯粹的图像。这是一段带有图像的文本。然后，当您单击 (X) 关闭按钮或单击页面上的任意位置时，灯箱会突然消失而不会淡出，并且所有原始图像都回到原位。

实际上发生的事情是您单击基本图像，它会像它应该的那样旋转、缩放和淡入淡出，但在背景中，其右侧的其他图像会滑过以取代它的位置。然后当你点击灯箱离开时，一切都回到原位。我不希望其他图像移动并填充第一个图像所在的位置。我如何防止一切发生变化，以便当您单击 image1 并且它动画消失时，其他图像保持原样？这样，如果您单击 image2、image 3、4 和 5 等，则不会滑过或诸如此类。

我正在使用一些 Javascript 来制作我的点击动画，这是我从另一个已回答的 Stack Overflow 问题中借用/学习的。如果你能找到更好的方法来实现我想要的，请帮助并添加它。

作为附带问题，如果您单击 (X) 关闭按钮或在文本框 之外，我怎样才能使灯箱出现，它会关闭灯箱，但如果您单击在 文本框内，没有任何反应，灯箱保持原样？这样，人们可以根据需要单击并突出显示以复制文本框内的文本。

我似乎无法通过片段代码重现任何点击动画，所以您可以看到实际发生了什么，这是我个人网络帐户上原始测试代码的链接，您可以在其中看到实际的点击动画和出了什么问题:http://www.cafenocturne.com/testpage/biogallery/

这是我正在使用的代码片段。

$(window).load(function() {
  $(".ClickAnim").click(function() {
    $(this).addClass("rotOutZm");
    setInterval(function() {
      $(".ClickAnim").removeClass("rotOutZm");
    }, 2000);

  });

});

/* Just some base styles not needed for example to function */

*,
html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
  height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
body {
  background-color: #606061;
  color: WHITE;
  overflow: hidden;
}
img {
  border: none;
}
p {
  font-size: 12px;
  margin: 0 0 1em 0;
}
h2 {
  padding: 10px 0 0 20px;
}
.clear + h2 {
  padding: 0 0 0 20px;
}
.clear {
  height: 0 !important;
  line-height: 0 !important;
  clear: both !important;
  font-size: 1px !important;
  margin: 0;
  padding: 0;
  float: none !important;
}
/* animations */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*rotateOut+Zoom */

@keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
.rotOutZm {
  -webkit-transform-origin: center;
  -webkit-animation: rotOutZm forwards 1.8s;
  transform-origin: center;
  animation: rotOutZm forwards 1.8s;
}
/* pulse */

@-webkit-keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* fadeIn */

@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn1 {
  -webkit-animation-name: fadeIn1;
  animation-name: fadeIn1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/* Bio styles */

ul {
  padding: 20px 0 20px 20px;
  float: left;
}
ul li {
  display: inline-block;
  float: left;
  list-style: none;
  margin: 0 10px 0 0;
}
.pulse1:hover {
  -webkit-animation: pulse1 0.8s;
  /* Safari 4+ */
  -moz-animation: pulse1 0.8s;
  /* Fx 5+ */
  -o-animation: pulse1 0.8s;
  /* Opera 12+ */
  animation: pulse1 0.8s;
  /* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
  display: block;
  cursor: pointer;
}
ul li input {
  display: none;
}
ul li input:checked + .overlay {
  display: table;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}
.overlay label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.overlay img {
  display: inline;
  border: none;
  padding: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: WHITE;
}
.overlay label > img,
.content01 {
  border: 1px solid GRAY80;
  -moz-box-shadow: 5px 5px 10px BLACK;
  -webkit-box-shadow: 5px 5px 10px BLACK;
  box-shadow: 5px 5px 10px BLACK;
}
.content01 {
  display: block;
  width: 460px;
  padding: 20px;
  background: WHITE;
  color: BLACK;
  margin: 0 auto;
  text-align: left;
  cursor: auto;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.content01 .inner_content {
  display: block;
  height: 500px;
  overflow-y: auto;
}
.content01 .inner_content span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.overlay .inner_content {
  height: 265px;
}
.content01 img:first-child {
  float: left;
  display: block;
  margin: 0 10px 0 0;
}
.content01 img {
  float: right;
  margin: 0 10px;
  padding: 0;
}
input[id^='bio'] {
  cursor: pointer;
  height: 265px;
}
.content02 {
  width: 820px;
  padding: 0;
}
#close {
  display: none;
}
.closebutton {
  background: #606061;
  color: #FFFFFF;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -12px;
  width: 24px;
  border: 2px solid;
  border-color: #c18c8b #c05a58 #cc514e #a67776;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
  background: #f43530;
  text-shadow: 1px 1px 1px GRAY80;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<body>

  <h2>Static Content</h2>

  <ul>
    <li>
      <label class="animated pulse1" for="bio">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
      </label>
      <input type="radio" id="bio" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
                            <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
    <li>
      <label class="animated pulse1" for="bio2">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
      </label>
      <input type="radio" id="bio2" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
							<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
  </ul>
  <div class="clear">&nbsp;</div>
  <input type="radio" id="close" name="Staff" />
</body>

</html>

Answer 1

我已经涉足了您的链接。如果您将宽度和高度(与图像的宽度和高度相同)放置在包裹图像的位置上，它将保留该空间，而不是将下一个图像移动到它的位置。

ul li label{
    width: 100px;
    height: 102px;
}