Question

我试图让红色框扩展到1000px并在它消失后填入绿色边。当我点击带有＆＃34; Ethan＆＃34;字样的图像时，我想让它平滑地制作动画，而不是突然填写。在上面。我也需要在另一边做这件事，但我不在乎图像突然移动。

我的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

Answer 2

HTML

<!DOCTYPE html>
<html style=" width=100%; height=1280px">
  <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

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

  </body>
</html>

CSS

<style>
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;}
  }
  @keyframes aslide {
    0% {left:50%}
    100% {
        left:100%;
        display:none;}
  }
  .ethanslide {
     animation-name:eslide;
    animation-duration:3s;
  }
  .averyslide {
     animation-name:aslide;
    animation-duration:3s;
  }
    </style>

JAVASCRIPT

<script>
function ethanclick() {
                var ethan = document.getElementById("ethan");
                var avery = document.getElementById("avery");
                ethan.style.left = "0px";
                avery.style.right = "0px";
                avery.className = "averyslide";


                setTimeout(function(){ 
                    avery.style.display = "none";
                    ethan.className = "ethanslide";
                    ethan.style.width = "100%";
                }, 2900);
            }
            function averyclick() {
                var avery = document.getElementById("avery");
                avery.style.width="1000px";
                avery.style.left="0px";
                document.getElementById("ethan").style.display="none";
            }
</script>

Answer 3

简单转换，并更改容器类名

function ethanclick() {
    container.className = 'container ethanslide';
}
function averyclick() {
    container.className = 'container averyslide';
}

fiddle code

如何正确制作此动画？

3 个答案: