Блог

Главная - Вопросы по программированию - Как я могу заставить Div полностью вытеснить другой div за пределы экрана?

Как я могу заставить Div полностью вытеснить другой div за пределы экрана?

#html #jquery #css #flexbox

Вопрос:

У меня есть 8 Div flexbox (2 цвета, 4 размера). Как сделать так, чтобы при нажатии кнопки внутри Div она анимировалась и выталкивала другую за пределы экрана, пока она расширяется прямо поперек?

В настоящее время мне удалось полностью развернуть div и скрыть другой, который выглядит нормально (причина, по которой я его спрятал, заключается в том, что он имеет ширину около 5 пикселей в левой части экрана, но я работал над этим весь день, и мне просто нужно посмотреть, как это делается!

CSS:

 .col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;
}

.flex-grid {
   display: flex;
}

HTML

 <div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>

Перепробовал множество различных анимаций jQuery, но, похоже, она просто не движется, если она уберет ее с экрана, даже пытался сделать это просто css с помощью нажатия и расширения класса.

Действительно борется, так что был бы признателен за любую помощь! (Если вы хотите, чтобы я показал jQuery, который я использовал, чтобы получить неполное решение для скрытия левого элемента и расширения правого, дайте мне знать)

Ответ №1:

 .col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;
   
}

.flex-grid {
   display: flex;
}

#box1:hover {
  animation: 1s forwards;
  background-color: red;
  animation-name: example;
}

@keyframes example {
  from {min-width: 0;}
  to {min-width: 99vw}
} 
 <div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>

Вам нужно добавить анимацию к данному элементу (или общему), т. е.

 #box1:hover {
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {min-width: 0;}
  to {min-width: 100vw}
}

Комментарии:

1. Это здорово, хотя на самом деле это нужно по щелчку мыши, а не при наведении курсора. Просто из интереса, я попробовал код, и он работает слева направо, но если я добавлю еще один эффект наведения справа налево, то возникнет та же проблема, что и при моей первой попытке, когда он раздавил первый div очень узким слева, есть идеи, почему?

2. потому что элементы в сети растут из начальной позиции (x, y) => (0, 0) до (x, y) =>> ( x, y). Это означает, что ось его роста проходит слева направо и сверху вниз. Таким образом, легко перемещать элементы вправо, но при поиске перемещения их влево вам нужно будет использовать переполнение: скрыто в вашей оболочке, а затем вместо того, чтобы увеличивать ширину элемента (как в моем примере), вам нужно будет установить отрицательное поле или абсолютное/фиксированное положение, которое заставляет левый элемент перемещаться за пределы макета влево, увеличивая размер элемента в нужном месте. (это ясно?)

Ответ №2:

Изменив ответ @JoelBonetR для работы с jQuery, вы можете использовать события наведения курсора мыши и mouseleave для захвата события наведения.

 $('.col2').on('mouseover', function(){
  $(this).css({
    'animation': '1s forwards',
    'background-color': 'red',
    'animation-name': 'example'
  });
  //hide other divs
  $(this).siblings().fadeOut();
});

$('.col2').on('mouseleave', function(){
  $(this).css({
    'animation-name': 'none',
    'background-color': 'white'
  });
  //show other divs
  $(this).siblings().fadeIn();
}); 
 .col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;
   
}

.flex-grid {
   display: flex;
}



@keyframes example {
  from {min-width: 0;}
  to {min-width: 99vw}
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>
Метки: