如何在jquery中使用旋转的css方法

How to use css method of rotation in jquery

本文关键字：旋转 css 方法 jquery      更新时间：2023-09-26

当我的网页第一次加载时，我的起始div使用以下CSS代码旋转：

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

在旋转之后，这个代码是无用的。我希望当点击一个按钮时，它会再次进行旋转。要做到这一点，我需要能够将这个css代码放入javascript/jQuery函数中，这样我就可以随时调用它。这可能吗？

尝试此

   $({deg: 0}).animate({deg: d}, {
            duration: 2000,
            step: function(now){
                elem.css({
                     transform: "rotate(" + now + "deg)"
                });
            }
        });

查看JSFIDDLE演示

您可以将动画行为包装到类似的类中

.rotate{
  -webkit-animation: rotate 4s;
  /* more prefixes if you want to */
  animation: rotate 4s;
}

然后你可以点击按钮应用该类，比如：

$('#myButton').click(function(){
  $('#myElementToAnimate').addClass('rotate');
});

要在动画完成后移除类，您必须侦听animationend事件，如：

$('#myButton').click(function(){
  // all the different event names are due to the fact that this isn't fully standardized yet
  $('#myElementToAnimate').addClass('rotate').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(){
    $(this).removeClass('rotate');
  });
});

与使用基于JavaScript的动画相比，这应该会给您带来更平滑的结果。请参阅此演示小提琴

只需将CSS属性和所需值应用于jQuery

演示

$(' #box ').css({
    transition: '2s linear',
    transform: 'rotate(360deg)'
});

p.S:jQuery将为您处理所有这些特定于浏览器的前缀

相关文章：