Wie macht man eine Transformationsskalenanimation mit jQuery?

Question

Ich versuche zu erreichen und "Öffnen-Fenster" Animation habe ich versucht, die folgenden:

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

Aber nur die opacity Animation funktioniert (es von 0 bis 1 geht). Und nur transform: 'scale(0.9,0.9)' wird angewendet.

Hinweis: Ich habe auch versucht mit '-webkit-transform' seit ich Chrome benutze, aber es hat auch nicht funktioniert.

Was ist der Grund transform funktioniert nicht?

Answer 1

Natürlich ist dieser css Übergang viel besser als jQuery animieren.

Hier ist ein generisches Beispiel, wie Animate transform mit jQuery.

Der Trick besteht darin, nicht betroffene CSS-Eigenschaft (wie border-spacing) zu setzen und "animieren". Dann können Sie den Callback step verwenden, um Ihren eigenen Animationseffekt zu erstellen.

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