javascript - 如何正确制作此动画？

Question

我试图让红色框扩展到 1000px 并在它消失后填充绿色边。我想让它流畅地动画而不是在我单击上面带有“Ethan”字样的图像时突然填充。我也需要在另一边这样做，但我不在乎图像是否突然移动。

我的 HTML 模板是

<div class="container">
  <div id="ethan">
    <div id="eitem1">
      <img id="item2o5" onclick="ethanclick()" src="http://i.imgur.com/VrCjYJv.png">
    </div>
  </div>
  <div id="avery">
    <div id="aitem1">
      <img id="item2o5" onclick="averyclick()" src="http://i.imgur.com/ODB7VQP.png">
    </div>
  </div>
</div>

下面是CSS代码

body {
  background-position: fixed;
}

.container {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 1000px;
  height: 1000px;
  background-image: url(http://i.imgur.com/ikSWEO3.gif);
  border: dotted;
  overflow-x: hidden;
  overflow-y: hidden;
}

#eitem1 {
  position: absolute;
  padding-top: 10px;
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 27px;
  background-color: rgba(255,0,0,0);
  transition: background-color 1s;
  text-align: left;
}

#eitem1:hover {
  background-color: rgba(255,0,0,0.3);
}

#aitem1 {
  position: absolute;
  padding-top: 10px;
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 10px;
  background-color: rgba(0,0,0,0);
  transition: background-color 1s;
}

#aitem1:hover {
  background-color: rgba(0,255,0,0.3);
}

#item2o5 {
  width: 300px;
}

#ethan {
  width: 500px;
  position: absolute;
  height: 1000px;
  z-index: 1;
  background-color: rgba(255,0,0,0.3);
  opacity: 1;
}

#avery {
  width: 500px;
  height: 1000px;
  left: 500px;
  position: absolute;
  z-index: 1;
  opacity: 1;
  background-color: rgba(0,255,0,0.3);
}

@keyframes eslide {
0% {
  width: 500px;
}

100% {
  width: 1000px;
}
}

.ethanslide {
  animation-name: eslide;
  animation-duration: 3s;
}

Javascript 代码是

function ethanclick() {
  var ethan = document.getElementById("ethan");
  ethan.style.left = "0px";
  ethan.className = "ethanslide";
  document.getElementById("avery").style.display = "none";
}

function averyclick() {
  var avery = document.getElementById("avery");
  avery.style.width = "1000px";
  avery.style.left = "0px";
  document.getElementById("ethan").style.display = "none";
}

Answer 1

将您的 ethanclick() 函数更新为

function ethanclick() {
  var ethan = document.getElementById("ethan");
  var avery = document.getElementById("avery");

  ethan.className = "ethanslide";

  //Added slide Out Animation In CSS3
  avery.className = "ethanslideout";

  //Once the animation is done applying properties permanently
  avery.addEventListener('webkitAnimationEnd', function(event) {
    avery.style.display = 'none';
    ethan.style.width = "1000px";
  }, false);

}

在您的 CSS 中添加这些行

@keyframes slideOut {
0% {
  left: 500px;
}

100% {
  left: 1000px;
}
}

.ethanslideout {
  animation-name: slideOut;
  animation-duration: 3s;
}

现在点击 Ethan 你会得到你想要的动画 Click here to see in action