Как сохранить изображения от переполнения в div? - PullRequest
Новая
       10

Как сохранить изображения от переполнения в div?

0 голосов
/ 28 августа 2018

Я стремлюсь реализовать следующие функции: https://puu.sh/BkRe7/20235d49fc.gif Три изображения выдвигаются со страницы вправо, исчезая в процессе и не переполняются, а три других скользят, чтобы занять их место.

Framework JFiddle: https://jsfiddle.net/pskdtzL1/64/ (просмотр в настройке «правильные результаты»)

Анимация работает отлично; проблема в том, что входящие изображения отображаются в «левом» 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 */

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Я добавил z-index в класс .left и установил отступ / отступ для тела в ноль. 

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>
0 голосов
/ 28 августа 2018

Я не могу сейчас комментировать, поэтому постараюсь дать ответ.

Поскольку изображение вложено в основной контейнер, вы можете добавить свойство: 

position: relative;

к основному классу, 

.main {
    ...
    position: relative;
}

так что любое позиционирование внутри основного класса будет относиться к контейнеру main.

...