如何使用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)'。

注意：我还尝试使用 '-webkit-transform'，因为我正在使用 Chrome，但它也不起作用。

为什么 transform 不起作用？

- alexchenco

---

你可以使用CSS动画吗？只需使用jQuery的addClass和removeClass方法，并在CSS中添加动画过渡（transition）。 - murli2308

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>

- Mosh Feu