Как оживить div в центр элемента - PullRequest
Новая
       30

Как оживить div в центр элемента

0 голосов
/ 29 апреля 2020

Я хочу оживить div в центр его родителя. Я использую подход, ориентированный на мобильные устройства, где мой div находится в центре родительского элемента, занимая 90% ширины родительского элемента. Когда достигается @media only screen and (min-width: 800px), ширина div уменьшается до 400 пикселей.

Моя проблема в том, что когда ширина родителя ниже точки разрыва, div сразу переходит в центр и занимает 90% от ширины родителя.

Как бы отменить этот эффект, если ширина родителя ниже точки разрыва, то анимация div выполняется по центру, а ширина занимает 90% ширины родителя?

Вот CSS: 

.container {
  background: white;
}
.box {
  background: red;
  width: 90%;
  height: 100px;
  margin: 0 auto;
  transition: width 1s, margin 2s;

}
@media only screen and (min-width: 800px) {
  .box {
    width: 400px;
    margin: 0 0 0 4em;
  }
}

Вот HTML: 

<div class="container">
  <div class="box"></div>
</div>

Вот скрипка https://jsfiddle.net/p38nrhu2/

Спасибо за ваше время!

1 Ответ

0 голосов
/ 02 мая 2020

Моим лучшим решением было изменение свойств CSS. Я использовал абсолютное позиционирование, чтобы расположить красное поле, убрал поля и использовал элементы позиционирования сверху и слева, чтобы имитировать поля c.

Вот CSS: 

.container {
    background: #fff;
    position: relative;
}
.box {
    width: 90%;
    height: 100px;
    background: red;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transition: left 1s, width 1s;
    background: red;
}

@media only screen and (min-width: 800px) {
    .box {
        width: 400px;
        left: 200px;
    }
}

Вот HTML: 

<div class="container">
    <div class="box"></div>
</div>

Это анимирует ширину до 400px и влево, когда точка останова @media only screen and (min-width: 800px) достигнут. В противном случае красная коробка переводится обратно в центр.

Вот скрипка https://jsfiddle.net/qchdj7sv/1/

...