javascript - 使用 jQuery 更改 CSS 动画

Question

我有以下关键帧动画，

@-webkit-keyframes rotate {
  from { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    transform: rotateY(0);
  }

  to { 
    -webkit-transform: rotateX(2160deg); 
    -moz-transform: rotateX(2160deg); 
    transform: rotateX(2160deg); 
   }
}

现在在某种情况下，我想改变这个动画的 到 {} 部分，然后是旋转。

我想使用 .css (?) 来实现。我如何在不使用多个动画的情况下做到这一点，而只是更改 CSS？

Answer 1

.css 不以这种方式支持 -webkit-keyframes。但是，您可以通过附加 style 标签动态生成新的 WebKit 关键帧。在此代码中，我使用了 JavaScript 的多行引号字符 `(小写波浪号)。

如果您希望能够通过 CSS 过渡动画化任何内容:

var uniqueRotate = 0;

$('#test').click(function () {
  var amountToRotate = Math.floor(180 * Math.random()) + 'deg',
      myRotateId = 'rotate' + uniqueRotate++;
  $('<style>')
    .text(`
    @-webkit-keyframes ` + myRotateId + ` {
      from { 
        -webkit-transform: rotateY(0); 
        -moz-transform: rotateY(0); 
        transform: rotateY(0);
      }

      to { 
        -webkit-transform: rotateX(` + amountToRotate + `); 
        -moz-transform: rotateX(` + amountToRotate + `); 
        transform: rotateX(` + amountToRotate + `); 
       }
    }
    `)
    .appendTo(document.body);
  $(this).css('animation', '1s ease-out 0s 1 ' + myRotateId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div id='test'>Testing cool stuff! Please click me!</div>

如果您只想更改转换:

var uniqueRotate = 0;

$('#test').click(function () {
  var amountToRotate = 180 * Math.random(),
      animationTime = 2*1000,
      updatePerMs = 20,
      iterations = 0; // every 20 ms we update our timer
  var myTimer = setInterval(function () {
    iterations++;
    var ratio = (updatePerMs*iterations) / animationTime,
        current = Math.floor(ratio * amountToRotate);
    if (ratio > 1) {
      clearInterval(myTimer);
      return;
    }
    $(this).css({
      '-webkit-transform': 'rotateX(' + current + 'deg)',
      '-moz-transform': 'rotateX(' + current + 'deg)',
      'transform': 'rotateX(' + current + 'deg)'
    });
  }.bind(this), updatePerMs);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div id='test'>Testing cool stuff! Please click me!</div>