如何使用jQuery进行变换缩放动画？

我正在尝试实现和“打开窗口”动画，我尝试了以下内容：

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不起作用的原因是什么？

Answer 1

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

以下是使用jQuery进行动画transform的一般示例。

诀窍是设置未受影响的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; } 

  
 Animate