Круг для заполнения контейнера анимацией - PullRequest
Новая
       10

Круг для заполнения контейнера анимацией

0 голосов
/ 09 января 2020

Я пытаюсь имитировать c анимацию, которая происходит, когда вы нажимаете на значок, чтобы открыть меню сверху на https://www.fpp.net/contact/ (вверху справа, круговая вещь ie), но мой выглядит неопрятно, а не из-за ослабления.

(визуально) кажется, что они используют некое прямоугольное наложение angular, и круг просто заполняет его. Это прямоугольное наложение angular - это ширина и высота браузера, поэтому кажется, что круг превращается в прямоугольник.

Я пробовал, но безрезультатно: 

$('#circle').on('click', (event) => {
  $(event.currentTarget).toggleClass('clicked');
});
body {
  
}

#circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  z-index: 999999999;
  top: 30px;
  left: 30px;
  transition: transform 0.75s ease;
  transform-origin: center;
}

#circle.clicked {
  transform: scale(150);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="circle"></div>
</body>

Как вы можете видеть, разница в их анимации и моей заключается в том, что они расширяются естественным образом, а моя расширяется ... странно?

Чтобы добавить к травме, потому что он расширяется настолько, что добавляет к браузеру высоту / ширину.

Что я могу сделать?

1 Ответ

2 голосов
/ 09 января 2020

Вы можете использовать box-shadow вместо transform и псевдо немного меньше, чтобы избежать ошибочного зазора вокруг контейнера и тени; 

$('#circle').on('click', (event) => {
  $(event.currentTarget).toggleClass('clicked');
});
body {}

#circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: absolute;
  z-index: 999999999;
  top: 30px;
  left: 30px;
  background-color: black;
}

#circle::before {
  content: '';
  height: 28px;
  width: 28px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: inherit;
  transition: 0.75s ease;
  box-shadow: 0 0 0 0vw;
}

#circle.clicked::before {
  box-shadow: 0 0 0 200vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="circle"></div>
</body>
...