Какой самый простой способ повернуть гладкий div? - PullRequest
Новая
       21

Какой самый простой способ повернуть гладкий div?

0 голосов
/ 06 февраля 2020

Каков наилучший способ сделать вращение div при щелчке, но с переходом?

Я пробовал это, но он делает плавный переход только при добавлении класса, но не при удалении класса:

js: 

$('#firstDiv' + id).click(function(){
    $("#Img" + id).toggleClass('rotated');
});

css: 

.rotated { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.1s linear;
}

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Просто используйте transition-duration свойство на цели: 

$('#firstDiv').click(function() {
  $(this).toggleClass('rotated');
});
#firstDiv {
  width: fit-content;
  transition-duration: 2s;  /* <-- Provide a smooth animation from 2s on all 'changes'*/
}

.rotated {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: all 0.1s linear;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="firstDiv">
  test
</div>
0 голосов
/ 06 февраля 2020

transition css свойство должно оставаться на элементе.

transition свойство - это то, что делает вращение гладким. Когда он находится в классе, который выполняет вращение, и вы удаляете класс, даже свойство transition удаляется. Следовательно, конец вращения не является плавным.

Ваш лог c верен, но может использоваться другой класс для применения -webkit-transition: all 0.1s linear; или для непосредственного применения к элементу. Убедитесь, что он не удаляется при удалении rotated class. 

const myDiv = $('#my-div');

setTimeout(()=>{
  myDiv.addClass('rotated');
}, 1000);
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s linear;
}

.rotated { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='my-div'>
</div>
...