Come si anima una proprietà css della scala usando jquery?

Question

Sto provando ad avere un div circle con la classe di "bubble" da far apparire quando viene cliccato un pulsante usando jQuery. Voglio farlo apparire dal nulla e crescere fino alla sua dimensione massima, ma ho difficoltà a farlo funzionare. heres il mio codice:

HTML Visualizza bolla ... CSS

.bubble { 
    transform: scale(0); 
} 

Javascript

$('button').click(function(){ 
    $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear'); 
}); 

Answer 1

È possibile eseguire la transizione usando CSS e poi basta usare Javascript come 'interruttore' che aggiunge la classe per avviare l'animazione. Prova questo:

$('button').click(function() { 
 
\t $('.bubble').addClass('animate'); 
 
})

.bubble { 
 
    transform: scale(0); 
 
    width: 250px; 
 
    height: 250px; 
 
    border-radius: 50%; 
 
    background-color: #C00; 
 
    transition: all 5s; 
 
} 
 
.bubble.animate { 
 
    transform: scale(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button>Inflate!</button> 
 

 
<div class='col-lg-2 col-md-2 well bubble'></div>

Answer 2

Attualmente non è possibile utilizzare animate con la transform proprietà see here

Tuttavia è possibile aggiungere un valore css transition e modificare il css stesso.

var scale = 1; 
 
setInterval(function(){ 
 
    scale = scale == 1 ? 2 : 1 
 
    $('.circle').css('transform', 'scale('+scale+')') 
 
}, 1000)

.circle { 
 
    margin: 20px auto; 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    transform: scale(1); 
 
    transition: transform 250ms ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circle"></div>

Answer 3

Meglio andare con CSS3 animazioni. Per l'animazione in un intervallo di frequente è possibile utilizzare con browser che supporti i prefissi (-webkit, -moz, ecc.) -

@keyframes fullScale{ 
    from{ 
     transform:scale(0); 
    } 
    to{ 
     transform:scale(1); 
    } 
} 
.bubble:hover{ 
    animation: fullScale 5s; 
} 

Suggerire questo link- http://www.w3schools.com/css/css3_animations.asp

O la soluzione di cui sopra da @Rory è anche un buon modo per aggiungere un add-on su un evento allegato.

Answer 4

È possibile utilizzare Velocity.js. http://velocityjs.org/ Ad esempio:

$("div").velocity({ 
    "opacity" : 0, 
    "scale" : 0.0001 
},1800)