jquery - 如何从每一侧向其中心缩小一个 div 而不是从右向左

Question

这是我的尝试: https://codepen.io/alexyap/pen/KmqGYd

#box {
width: 50px;
height: 50px;
background: black;
transition: .9s ease;
transform-origin: 50% 50%;
}

.test {
width: 0 !important;
}

#button {
height: 50px;
width: 50px;
background: black;
color: white;
}

我认为 transform-origin 可以解决问题，但显然没有

Answer 1

Transition transform: scale() 代替，然后 transform-origin 将起作用，因为 transform-origin 与 transform 属性。并且无需指定，原点默认为中心。

$(document).ready(function(){
  $("#button").click(function(){
    $("#box").toggleClass("test");
  })
  
})

#box {
  width: 50px;
  height: 50px;
  background: black;
  transition: .9s ease;
}

.test {
  transform: scaleX(0)
}

#button {
  height: 50px;
  width: 50px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

<div id="button">
  Click me!
</div>