从中心扩展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。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;