CSSメソッドは瞬間的に処理されるものだと思っていたのに、ある条件で突然アニメーションになった。

要素をhoverイベントで$(".matrix").css("transform", "rotate(1000deg)");して角度を一瞬で変えたいです。
普通にやればhoverした瞬間rotate(1000deg)になります。
ただ、hoverイベントより前にsetIntervalで定期的に回転する処理をした状態でhoverイベントをすると、瞬間でなくアニメーションになります。
なぜかわかるかたいらっしゃいますでしょうか？
cssのhover擬似要素ではなく、JQueryで処理したいです。（ここから拡張する上でその必要があるため）

https://gyazo.com/2190a6117a3b876453a12474cc13f5a6

https://gyazo.com/dfee3c93b1c322d61415ff33e6b7eb64

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/reset.css">
6  <link rel="stylesheet" href="css/stylesheet.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8  <script src="main.js"></script>
9</head>
10<body>
11  <div class="matrix"></div>
12</body>
13</html>

css
1body{
2  background-color: black;
3  overflow: hidden;
4  padding: 100px;
5}
6.matrix{
7  background-color: red;
8  width: 100px;
9  height: 100px;
10  transform: rotate(0deg);
11}

js
1$(function () {
2  // transformはanimateが使えないので使えるように（ネットから引っ張ってきたものです）
3  $.fn.animate2 = function (properties, duration, ease) {
4    ease = ease || 'ease';
5    var $this = this;
6    var cssOrig = { transition: $this.css('transition') };
7    return $this.queue(next => {
8        properties['transition'] = 'all ' + duration + 'ms ' + ease;
9        $this.css(properties);
10        setTimeout(function () {
11            $this.css(cssOrig);
12            next();
13        }, duration);
14    });
15  };
16  
17  let deg = 0;
18  let rotationFunc = function() {
19    deg = deg + 45;
20    $(".matrix").stop().animate2({ transform: "rotate(" + deg + "deg)" }, 1000)
21  }
22  setInterval(rotationFunc, 1500);
23  $(".matrix").hover(function () {
24    $(".matrix").css("transform", "rotate(1000deg)");      
25  })
26});

行動規範の内容に同意します

回答1件

ベストアンサー

ただ、hoverイベントより前にsetIntervalで定期的に回転する処理をした状態でhoverイベントをすると、

こちらの処理でtransition: allが入っているため、transition可能なプロパティはCSSでtransitionするようになります。

投稿2020/02/21 00:06

maisumakun

総合スコア145208

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSメソッドは瞬間的に処理されるものだと思っていたのに、ある条件で突然アニメーションになった。

関連した質問