Анимация элемента

Question

$(this).find('.question-text__arrow').toggleClass('question-text__arrow--rotate', 1000);

.question-text__arrow--rotate {
 transform: rotate(-180deg);
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<svg class="question-text__arrow" width="18" height="11" viewBox="0 0 18 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
  <path d="M2 2L9 9L16 2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>

Мне нужно что бы при добавлений класса проигрывалась анимация поворота блока, но параметр '1000' не решает мою проблему. Подскажите решение.

Answer 1

Вы пытаетесь вращать весь SVG. Нужно вращать path, отображающую галочку

1. Пример вращения галочки при наведении

svg >  path {
 transform-origin: center;
 transform-box:fill-box;
 transform: rotate(0deg);
 transition:transform 1s;
 } 
 svg >  path:hover{
  transform: rotate(-180deg);
 }

<svg id="question-text__arrow" width="18" height="11" viewBox="0 0 18 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
  
  <path class="path" d="M2 2L9 9L16 2" stroke-width="3" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>

2. Пример вращения галочки при click c (toggleClass)

$( ".question-text__arrow" ).click(function() {
  $( this ).toggleClass( "active" );
});

.question-text__arrow {
width:18px;
height:14px;
 transform-origin: center;
 transform-box:fill-box;
 transform: rotate(0deg);
 transition:transform 1s;
 } 
 .active {
  transform: rotate(-180deg);
 }

<div class="question-text__arrow">
 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<svg  width="18" height="11" viewBox="0 0 18 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
  <g>
  <path class="path" d="M2 2L9 9L16 2" stroke-width="3" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
  </g>
</svg>
</div>

Answer 2

А можно эту анимацию сделать на javascript и получится вот такая красота но без rotate

А можно ещё сменить стандартный linear на какой то другой ease то получим вполне себе классную анимашку: https://codepen.io/topicstarter/pen/VwevyKE которая работает только в Хроме и в -webkit-Edge но плавности нету в Firefox

let checkbox = document.getElementById("check");
let path = document.getElementById("path");

checkbox.addEventListener("input", function() {
  if (checkbox.checked) {
    path.setAttribute("d", "M200,250 500,500 800,250");
  } else {
    path.setAttribute("d", "M200,250 500,50 800,250");
  }
});

svg {
  display: block;
}

path {
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.34s linear;
}

input[type="checkbox"] {
  display: none;
}

<div class="item">
  <label for="check">
    <input type="checkbox" id="check">
    <svg id="svg" viewBox="0 -100 1000 650" width="100">
      <path id="path" d="M200,250 500,50 800,250" fill="transparent" stroke="#000" stroke-width="100"></path>
    </svg>
  </label>
</div>

БЛОГ НА HUSL

Анимация элемента

Ответы (2 шт):