javascript - 使用 jquery 暂停 css 动画不工作

Question

我有一个旋转 SVG 的 CSS 动画。我正在尝试使用 jquery 在悬停时暂停动画。但是，我的尝试无效，您能指点一下吗？

var menuText = $('.menuTexti'),
  rotate = $('.rotate'),
  playState = '-webkit-animation-play-state';

menuText.hover(function() {
  rotate.css(playState, function(i, v) {
    return v === 'paused' ? 'running' : 'paused';
  });
  rotate.addClass('paused', $(this).css(playState) === 'paused');
}, function() {
  rotate.removeClass('paused', $(this).css(playState) === 'paused');
});

.rotate {
  -webkit-animation: rotation 30s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 930 930" style="enable-background:new 0 0 930 930;" xml:space="preserve" id="menuText" class="menuText rotate">
        <g class="menuTexti">
                <path d="M752.7,180l-13.4-11.8l-31.4,35.6l-15.9-14l31.4-35.6l-13.4-11.8l13.9-15.8l42.7,37.6L752.7,180z"/>
        </g>
    </svg>

Answer 1

如果我没有弄错你想做什么，这应该可以正常工作:

var 
menuText = $('.menuTexti'),
rotate = $('.rotate'),
playState = '-webkit-animation-play-state';

menuText.hover(function() {
  rotate.css(playState, 'paused');
}, function(){
  rotate.css(playState, 'running');
});

.rotate {
    -webkit-animation: rotation 30s infinite linear;
}

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
}
 to {
    -webkit-transform: rotate(359deg);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 930 930" style="enable-background:new 0 0 930 930;" xml:space="preserve" id="menuText" class="menuText rotate">
    <g class="menuTexti">
            <path d="M752.7,180l-13.4-11.8l-31.4,35.6l-15.9-14l31.4-35.6l-13.4-11.8l13.9-15.8l42.7,37.6L752.7,180z"/>
    </g>
</svg>

我假设您正尝试在 mouseover 时暂停动画，并在 mouseout 时继续播放。