How to do a transform scale animation with jQuery?

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?

Answers 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>


Related Articles