从中心展开 div

Question

我正在尝试制作一个像 google material 设计一样可扩展的圆圈 div，但有些东西不起作用。我希望它展开并填充页面（从顶部 0 到右侧 0）并保持在原位。但是当宽度和高度增加时，div的中心移动。

我希望此模板 (ThemeForest) 上的搜索按钮具有相同的效果：https://html.nkdev.info/_con/dashboard.html

这是我的代码：

$('.expand').on('click', function() {
  $('.to-expand').css({
    'width': '300px',
    'height': '300px'
  })
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>

Answer 1

也许你是从比例上看：

$('.expand').on('click', function() {
  $('.to-expand').addClass('scale');
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
}
.scale {
  transform:scale(15);
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>

Answer 2

使用transform: scale(15)而不是操纵width和height。

$('.expand').on('click', function() {
  $('.to-expand').css({
    "transform": "scale(15)"
  })
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
  transform-origin: center center;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>

Answer 3

$('.expand').on('click', function() {
  $('.to-expand').addClass('expanded');
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
}
.expanded{
  top: -100vmax;
  right: -100vmax;
  width: 250vmax;
  height: 250vmax;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>

从中心展开 div

Expand div from center

html

javascript

css

expand

center