Анимация пропорционального уменьшение блока до display:none с расположением к центру

Question

Подскажите, есть ли возможность реализовать анимацию при которой div "схлопывался" не в верхний левый угол, а к центру своего размещения. Приведу пример:

$(".button").on("click", function() {
  $(".block").animate({
    height: 'toggle',
    width: 'toggle',
  });
});

.button {
  width: 40px;
  height: 40px;
  background: red;
  cursor: pointer;
}

.block {
  width: 200px;
  height: 240px;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='button'></button>
<div class="block"></div>

Можно ли как-то сменить точку отсчета ?

Answer 1

Может быть Вам подойдет transform:scale(0)

$(".button").on("click", function() {
  $(".block").toggleClass('scale0');
});

.button {
  width: 40px;
  height: 40px;
  background: red;
  cursor: pointer;
}

.block {
  width: 200px;
  height: 240px;
  border: 1px solid #000;
  transition: 300ms
}

.scale0{
  transform:scale(0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='button'></button>
<div class="block"></div>

БЛОГ НА HUSL

Анимация пропорционального уменьшение блока до display:none с расположением к центру

Ответы (1 шт):