1

$(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' не решает мою проблему. Подскажите решение.

1
  • transition: transform 1s;
    – MoloF
    8 июн 2020 в 13:52

2 ответа 2

2

Вы пытаетесь вращать весь 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>

1

А можно эту анимацию сделать на 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>

1
  • 1
    Отличный пример анимации атрибута d 9 июн 2020 в 6:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.