css - 使用自举 Accordion 平滑地切换变换旋转箭头

Question

我正在使用 Bootstrap Accordion 。我有一个 img 当按钮类有 collapsed 类时改变，旋转 180 deg 或 0 deg 如果类不活跃。它的工作，但我想让它顺利，如 keyframes 动画。你可以看到活生生的例子 here .

.tab-arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.collapsed .tab-arrow {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="card no-focus-outline">
  <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <div class="card-header bg-rosa mb-5" id="headingOne">
            <div style="max-width: 511px;">
              <h1>HABITACIÓN INDIVIDUAL</h1><img src="https://lagaleramagazine.es/rucab/img/arrow-down.png" class="tab-arrow" style="margin-bottom: -300px; width: 70px; " /></div>   
        </div>
            </button>

  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
    <div class="card-body">
      <div class="row justify-content-center align-items-center">
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/SOL-02-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/VENTILADOR-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/CALEFACCION-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/WIFI-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/ESCRITORIO-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/WC-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/DUCHA-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/TARJETA-02.png" /></div>
        <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/LIMPIEZA-02.png" /></div>
      </div>
      <div class="container">
        <div class="row" style="margin-bottom: 150px;">
          <div class="img-container-hab col-lg-8 mx-auto">
            <img class="top fade-in" alt=" " src="img/stock-photo-double-bed-in-the-hotel-696169024.jpg" width="100%">

          </div>
          <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 mx-auto home-text-div">
            <p class="habitaciones-text-p text-justify">Habitación totalmente reformada con una cama individual de 0.90 cm, cuenta con calefacción en invierno y ventilador de techo en verano, amplio escritorio y muy luminoso, baño privado dentro de la habitación, agua caliente, un gran armario
              con capacidad para todo lo que necesites guardar, puerta de seguridad con tarjeta de acceso, internet por cable, wifi, una ventana, servicio de limpieza una vez a la semana y un pequeño kit de limpieza para necesidades puntuales. </p>
          </div>
        </div>
      </div>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
      denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

Answer 1

将过渡添加到您的 .tab-arrow 类。

.tab-arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);

  -webkit-transition: transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}

将 0.25s 更改为您想要控制速度的任何值。