从中心扩展div

Question

我正在尝试制作像div材料设计一样可扩展的圆形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>