Question

我寻求实现以下功能：https://puu.sh/BkRe7/20235d49fc.gif 三张图像从页面右侧滑出，在此过程中逐渐消失，没有溢出-其他三张图像滑入了它们的位置。

JFiddle框架：https://jsfiddle.net/pskdtzL1/64/（在“正确的结果”设置中查看）

动画效果很好；问题是，尽管“主” div中有“溢出：隐藏”，但传入的图像仍显示在“左” div中。我希望图像显示仅限于放置它们的div。

我们非常感谢您的帮助。

HTML

<div class="row">
    <div class="left">
    Stuff
    </div>

    <div class="main">
    <!-- several <img> and a <button>-->
    </div>
</div>

CSS

* {box-sizing: border-box;}   
.row {display: flex; flex-wrap: wrap;} 
.left {flex: 20%;
       background-color: #f1f1f1;
       padding: 20px;}
.main {flex: 80%;
       background-color: white;
       padding: 20px;
       overflow: hidden;}
.lleft {position:absolute; left: -300px;} 

/* Animation CSS */

JScript

function Btn(){
  document.getElementById('bx1').classList.add('outward'); 
  ... 
  document.getElementById('bx4').classList.add('inward'); 
  ...
  document.getElementById('bx0').removeAttribute('style');}

  /* 'outward' & 'inward' = CSS animations */

Answer 1

我现在无法发表评论，所以我将尝试提供答案。

由于图像嵌套在主容器中，因此您可以添加属性：

position: relative;

到主要班级

.main {
    ...
    position: relative;
}

以便在主类内部完成的任何定位都将相对于main的容器。

Answer 2

我向.left类添加了一个z-index，并将主体的填充/边距设置为零。

function Btn() {
  document.getElementById('bx1').classList.add('outward');
  document.getElementById('bx2').classList.add('outward');
  document.getElementById('bx3').classList.add('outward');
  document.getElementById('bx4').classList.add('inward');
  document.getElementById('bx5').classList.add('inward');
  document.getElementById('bx6').classList.add('inward');
  document.getElementById('bx0').removeAttribute('style');
}

* {
  box-sizing: border-box;
}


/* Added */
body {
  padding: 0;
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
  z-index: 50; /* Added */
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
}

.lleft {
  position: absolute;
  left: -300px;
}

* {
  box-sizing: border-box;
}


/* Animations*/

.outward {
  animation-name: myAnimation;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.inward {
  animation-name: myAnimation2;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

@keyframes myAnimation {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    transform: translateX(600px);
    opacity: 0;
    display: none;
  }
}

@keyframes myAnimation2 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    transform: translateX(500px);
    opacity: 1;
  }
}

<div class="row">
  <div class="left">
    Stuff
  </div>
  <div class="main">
    <img id="bx1" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx2" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx3" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <span style="padding-left: 90px" </span>
    <span class="lleft" id="bx0" style="display: none">
      <img id="bx4" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx5" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx6" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    </span><br>
    <button onclick="Btn()">Slide</button>
  </div>
</div>

如何防止图像溢出到div中？

2 个答案: