Question

当我点击.btn时，我希望.btn内的跨度旋转180度。但是，跨度也向右移动并在旋转后下降。任何人都可以帮我解释为什么它会这样移动。我试图改变：旋转后翻译（-21px，1px）然后跨度将移动到正确的位置，但我相信会有另一种更好的方法来解决它。我也试过变换原点：50％50％，但它也不起作用。

$('.btn').on('click', function(){
  $(this).toggleClass('open');
})

@import "https://fonts.googleapis.com/css?family=Raleway";
body {
  background-color: #ddd;
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
  color: #7a7b7c;
}

.btn {
  width: 80px;
  height: 80px;
  background-color: #6F7272;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem #babbbc;
  position: absolute;
}
.btn span {
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before, .btn::after {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before {
  margin-top: -7px;
}
.btn::after {
  margin-top: 7px;
}

.open {
  transition: 0.3s ease-in-out;
  background-color: #6F7272;
}
.open span {
  transition: .3s ease-in-out;
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
  <span></span>
</div>

Answer 1

如果您移除transform: translate(-50%, -50%);，只需保留left:26%和top: 49%即可。

你的问题为什么会这样。因为您已使用左侧和顶部位置移动它，并且您正试图通过平移来中和它。这是将动画中心移动到不同位置。

＆＃13;

$('.btn').on('click', function(){
  $(this).toggleClass('open');
})

＆＃13;

@import "https://fonts.googleapis.com/css?family=Raleway";
body {
  background-color: #ddd;
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
  color: #7a7b7c;
}

.btn {
  width: 80px;
  height: 80px;
  background-color: #6F7272;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem #babbbc;
  position: absolute;
}
.btn span {
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 49%;
  left: 26%;
//  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before, .btn::after {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before {
  margin-top: -7px;
}
.btn::after {
  margin-top: 7px;
}

.open {
  transition: 0.3s ease-in-out;
  background-color: #6F7272;
}
.open span {
  transition: .3s ease-in-out;
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
  <span></span>
</div>

＆＃13;

Answer 2

更新此款式

.open span {
    transition: .3s ease-in-out;
    transform: rotate(180deg) translate(20px, 1px );
}

$('.btn').on('click', function(){
  $(this).toggleClass('open');
})

@import "https://fonts.googleapis.com/css?family=Raleway";
body {
  background-color: #ddd;
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
  color: #7a7b7c;
}

.btn {
  width: 80px;
  height: 80px;
  background-color: #6F7272;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem #babbbc;
  position: absolute;
}
.btn span {
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before, .btn::after {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before {
  margin-top: -7px;
}
.btn::after {
  margin-top: 7px;
}

.open {
  transition: 0.3s ease-in-out;
  background-color: #6F7272;
}
.open span {
  transition: .3s ease-in-out;
  transform: rotate(180deg) translate(20px, 1px );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
  <span></span>
</div>

Answer 3

检查这是否是您想要实现的目标。

在这里，我在css transform-origin: 10px;添加了一行。其他一切都是一样的。 JS中的更改是在动画执行后立即删除add类。否则，您需要在按钮上单击两次以再次查看动画。

$('.btn').on('click', function(){
  $(this).addClass('open');
  setTimeout(function() {
    $('.btn').removeClass('open');
  }, 300);
})

body {
  background-color: #ddd;
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
  color: #7a7b7c;
}

.btn {
  width: 80px;
  height: 80px;
  background-color: #6F7272;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem #babbbc;
  position: absolute;
}
.btn span {
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before, .btn::after {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.btn::before {
  margin-top: -7px;
}
.btn::after {
  margin-top: 7px;
}

.open {
  transition: 0.3s ease-in-out;
  background-color: #6F7272;
}
.open span {
  transition: .3s ease-in-out;
  transform: rotate(180deg);
  transform-origin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
  <span></span>
</div>

Answer 4

您的方法没有按预期工作，因为点击事件后，您正在转变X＆amp; Y span使用translate属性，然后rotating的{{1}}值。这导致它在转换时改变它的位置。

您使用position: absolute将span置于中间位置。这也可以通过其他CSS属性来实现，例如display: table或display :flex

查看以下建议 - 大部分代码都是你的，只需稍加改动。

＆＃13;

$('.btn').on('click', function() {
  $(this).toggleClass('open');
})

＆＃13;

@import "https://fonts.googleapis.com/css?family=Raleway";
body {
  background-color: #ddd;
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
  color: #7a7b7c;
}

.btn {
  width: 80px;
  height: 80px;
  background-color: #6F7272;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2rem #babbbc;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn span {
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  /*  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute; */
}

.btn::before,
.btn::after {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.btn::before {
  margin-top: -7px;
}

.btn::after {
  margin-top: 7px;
}

.open {
  transition: 0.3s ease-in-out;
  background-color: #6F7272;
}

.open span {
  transition: .3s ease-in-out;
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
  <span></span>
</div>

＆＃13;

元素在转换后移动

4 个答案: