How to do a transform scale animation with jQuery?

Question

I'm trying achieve and "opening-window" animation, I tried the following:

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()
  }
}

But only the opacity animation works (it goes from 0 to 1). And only transform: 'scale(0.9,0.9)' is being applied.

Note: I also tried with '-webkit-transform' since I'm using Chrome, but it didn't work either.

What's the reason transform isn't working?

Answer 1

Of course that css transition is much better then jQuery animate.

Here is a generic example of how animate transform with jQuery.

The trick is to set unaffected css property (like border-spacing) and "animate" it. Then, you can use the step callback to create your own animation effect.

$('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>