Question

我使用HTML，JS和CSS创建了一个手风琴。但是，当您单击手风琴时，“ +”无法正确旋转，因为它是从“ +”符号的顶部而不是“ +”符号的中间旋转的。

我的HTML：

<div class="acc">
  <div class="acc-titel">Graphic Designer - London</div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

我的CSS：

.acc-titel {
  position: relative;
  background: #fff;
  padding: 20px;
  margin-bottom: 15px;
  color: #08455c;
  transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
  border: 2px solid #08455c;
}

.acc-titel:after {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  content: "+";
  font-size: 1.8em;
  line-height: 0.7em;
  color: #08455c;
  float: right;
  height: 20px;
  width: 20px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);
}

.acc-titel:hover {
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}

.active:after {
  content: "+";
  transform: rotate(405deg);
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}
.acc-content p {
  font-size: 16px;
}

我的问题的密码笔是https://codepen.io/mrsalami/pen/LBazMm

Answer 1

默认旋转点是元素的中心。您的问题是因为您将元素设置得太小，所以中心点不是X的中心，因此它似乎绕中心旋转。

要解决此问题，请从width删除height和.acc-titel:after CSS属性

var accordion = document.getElementsByClassName("acc-titel");
var i;

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var showContent = this.nextElementSibling;
    if (showContent.style.maxHeight) {
      showContent.style.maxHeight = null;
      showContent.style.opacity = null;
      showContent.style.transform = "translateY(5px)";
    } else {
      showContent.style.maxHeight = showContent.scrollHeight + "px";
      showContent.style.opacity = "1";
      showContent.style.transform = "translateY(0px)";
    }
  });
}

.acc-titel {
  position: relative;
  background: #fff;
  padding: 20px;
  margin-bottom: 15px;
  color: #08455c;
  transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
  border: 2px solid #08455c;
}

.acc-titel:after {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  content: "+";
  font-size: 1.8em;
  line-height: 0.7em;
  color: #08455c;
  float: right;
  text-align: center;
  display: block;
  transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);  
}

.acc-titel:hover {
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}

.active:after {
  transform: rotate(405deg);
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}

.acc-content p {
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acc">
  <div class="acc-titel">Graphic Designer - London</div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

如何使用CSS将“ +”旋转为“ x”？

1 个答案: