Повернутый значок щелкает назад после завершения анимации

Попытка анимировать мой значок, чтобы повернуть 45 градусов на событие щелчка, и после того, как вы нажмете его снова он поворачивается обратно. Успешно получив мое первоначальное вращение при щелчке, однако без щелчка, после завершения анимации он возвращается в исходное состояние.

HTML

<div class="trip-detail--icon-plus">
  <span class="transport--plus spin" ng-class="{active:showActionOptions}"></span>
</div>

стиль CSS

.spin::before {
  -moz-transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
  -o-transition: transform 1s ease;
  transition: transform 1s ease;
}


.spin.active::before {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

1 ответ

  1. То, что вы пытаетесь сделать, потребует взлома CSS для имитации события click
    Вы можете прочитать на CSS нажмите события

    Вы также можете просмотреть мое решение в JSFiddle

    <input type="checkbox" id="toggle-1">
    <label for="toggle-1">
      <div>Control me</div>
    </label>
    

    Вот код CSS

    /* Checkbox Hack */
    input[type=checkbox] {   
      position: absolute;   
      top: -9999px;   
      left: -9999px;
    }
    
    label {   
      display: inline-block;  
      margin: 60px 0 10px 0;  
      cursor: pointer;
    }
    
    /* Default State */
    div {   
      background: green;   
      width: 400px;   height: 100px;   
      line-height: 100px;   
      color: white;   
      text-align: center;   
      transition: transform 2s ease; 
    }
    
    /* Toggled State */
    input[type=checkbox]:checked ~ label div {   
      background: red;   
      transform: rotate(45deg);
    }      
    

    Единственные важные строки в коде CSS являютсяtoggled state, checkbox hackи transitionсвойство в состоянии div по умолчанию

    ОБНОВЛЕННЫЙ ОТВЕТ

    Так как вы используете javascript для обработки событий click, гораздо проще выполнить использование animationвместо transitionI don’t know what your click handler looks like, но вы заявили, что он переключает различные классы, так что это код, который я написал

    Вот код CSS

    @keyframes spin-forward {
      from {
        transform: rotate(0deg);
      } to {
        transform: rotate(45deg);
      }
    }
    
    @keyframes spin-backword {
      from {
        transform: rotate(45deg);
      } to {
        transform: rotate(0deg);
      }
    }
    
    .spin-right {
      animation: spin-forward 2s ease forwards;
    }
    
    .spin-left {
      animation: spin-backword 2s ease forwards;
    }
    

    Вот код Javascript

    $(function() {
      $('div').on('click', function() {
        var el = $(this);
        var klass = this.className;
        if (klass === "") {
          el.addClass('spin-right');
        } else if (klass === 'spin-right') {
          el.attr('class', 'spin-left');
        } else {
          el.attr('class', 'spin-right');
        }
      });
    });
    

    Причина, почему animationлучше, потому что он предлагает больше контроля. forwardsЗначение позволяет сохранить элемент в новом состоянии после завершения анимации.

    Вы можете проверить это JSFiddle

    Надеюсь, это решит его