Question

我正在使用Bootstrap手风琴。我有一个img，当按钮类具有collapsed类时发生更改，如果类未处于活动状态，则旋转180 deg或0 deg。它可以工作，但我想使其顺畅，就像keyframes animation。您可以看到实时示例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更改为您想要控制速度的任何值。

使用bootstrap手风琴平滑切换切换旋转箭头

1 个答案: