Нужно, чтобы переполнение было скрыто в анимации jquery - PullRequest
0 голосов
/ 12 апреля 2020

У меня есть анимация, которую я хочу воспроизвести в пределах фиксированной высоты и ширины «контейнера» (здесь необходимо скрыть переполнение - все, что находится за черной рамкой).

 $(document).ready(function(){
    $("#animate").animate({width:"120%", top:"45%"}, 400)
    });
.container{
  width: 900px;
  height: 980px;
  border:1px solid black;
  overflow: hidden;
}

#animate{
  background: navy;
  position: absolute;
  bottom:0;
  right:0;
  height:100px;
  transform: rotate(25deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div id="animate"></div>
    <div id="animate_b"></div>
    <div id="animate_c"></div>
    <div id="animate_d"></div>
  </div>

Ответы [ 2 ]

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

Что-то вроде этого?

Обратите внимание на изменения:

  1. Теперь container имеет относительную позицию, которая делает дочернее абсолютное позиционирование привязанным к нему, а не body или любого другого родителя.
  2. Я изменил свойство right animate, чтобы оно выглядело, как у вас.
  3. Я также изменил процент width в анимации .

$(document).ready(function () {
  $("#animate").animate({ width: "170%", top: "45%" }, 400);
});
.container {
  position: relative;
  width: 900px;
  height: 980px;
  border: 1px solid black;
  overflow: hidden;
}

#animate {
  background: navy;
  position: absolute;
  bottom: 0;
  right: -250px;
  height: 100px;
  transform: rotate(25deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="animate"></div>
  <div id="animate_b"></div>
  <div id="animate_c"></div>
  <div id="animate_d"></div>
</div>

CodePen

Ссылка MDN :

Если свойство position является абсолютным, содержащий блок формируется краем поля заполнения ближайшего элемента-предка, который имеет значение позиции, отличное от stati c (фиксированное, абсолютное, относительное или закрепленное).

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

Вам просто нужно добавить position: relative; к стилю элемента контейнера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...