jquery - 如何用 jQuery 制作变换比例动画？

Question

我正在尝试实现和“打开窗口”动画，我尝试了以下操作:

import $ from 'jquery'

export const fade = {
  css: false,
  enter: function (el, done) {
    $(el)
      .css('opacity', 0)
      .css({ transform: 'scale(0.9,0.9)' })
      .animate({
        opacity: 1,
        transform: 'scale(1,1)'
      }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    $(el).animate({
      opacity: 0,
      transform: 'scale(0.9,0.9)'
    }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
}

但只有 opacity 动画有效(它从 0 到 1)。并且仅应用 transform: 'scale(0.9,0.9)'。

注意:由于我使用的是 Chrome，所以我也尝试过使用 '-webkit-transform'，但它也不起作用。

transform 不起作用的原因是什么？

Answer 1

当然，CSS 过渡比 jQuery 动画要好得多。

这是一个如何使用 jQuery 进行转换动画的通用示例。

技巧是设置不受影响的 css 属性(如 border-spacing)并对其进行“动画”处理。然后，您可以使用step回调来创建您自己的动画效果。

$('button').click(function() {
  $('div').css('borderSpacing', 1).animate(
    {
      borderSpacing: 1.3
    },
    {
    step: function(now,fx) {
      $(this).css('transform','scale('+now+')');  
    },
    duration:'slow'
  });
});

div {
  width:150px;
  height:150px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Animate</button>