jquery - 如何使用 CSS 将 "+"旋转为 "x"？

Question

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

我的 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 的中心，因此它看起来围绕中心运行。

要解决此问题，请从 .acc-titel:after 中删除 width 和 height 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>