Question

我试图在单击时将SVG图标从上位置旋转到下位置。

纯CSS解决方案会很棒，但我不知道。它适用于字体图标，但在这种情况下我无法使用字体图标。只能使用图像或SVG。

我该怎么办？

.collapse-arrow .icon {
  transition: .3s transform ease-in-out;
}

.collapse-arrow .collapsed .icon {
  transform: rotate(-180deg);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="collapse-arrow">
        <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
          <span class="icon">
             <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
         xml:space="preserve">
      <g>
        <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
          c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
          c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
      </g>
             </svg>
          </span>
          <strong>Link to toggle</strong>
        </a>
        <div class="collapse" id="collapseFilter">
          <p>Some content I want collapsed or expanded</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将类添加到锚标记后，您可以更新变换。

.collapse-arrow .icon {
  transform: rotate(-180deg);
  transition: .3s transform ease-in-out;
  display: inline-block;
}

.collapse-arrow .collapsed .icon {
  transform: rotate(0deg);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="collapse-arrow">
        <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
          <span class="icon">
             <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
         xml:space="preserve">
      <g>
        <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
          c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
          c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
      </g>
             </svg>
          </span>
          <strong>Link to toggle</strong>
        </a>
        <div class="collapse" id="collapseFilter">
          <p>Some content I want collapsed or expanded</p>
        </div>
      </div>
    </div>
  </div>
</div>

单击Bootstrap 4折叠时旋转SVG图像

1 个答案: