javascript - remove - ¿Cómo animo una propiedad css de escala usando jquery?

removeattribute jquery

Question

Estoy tratando de tener un círculo div con la clase de "burbuja" para que aparezca cuando se hace clic en un botón con jQuery. Quiero que aparezca de la nada y crezca hasta su tamaño completo, pero tengo problemas para que funcione. Heres mi código:

HTML Mostrar burbuja ... CSS

.bubble {
    transform: scale(0);
}

Javascript

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

Answer 1

Actualmente no puedes usar animate con la propiedad de transform ver aquí

Sin embargo, puede agregar un valor de transition css y modificar el css en sí.

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 2

Mejor ir con animaciones CSS3. Para animaciones en un intervalo frecuente, puede usar con el navegador que admite prefijos (-webkit, -moz, etc.) -

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

Consulte este enlace: http://www.w3schools.com/css/css3_animations.asp

O la solución anterior de @Rory también es una buena manera de agregar clase en un evento adjunto.

Answer 3

Puede realizar la transición usando CSS y luego usar Javascript como el ''interruptor'' que agrega la clase para comenzar la animación. Prueba esto:

$(''button'').click(function() {
 $(''.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 4

Puedes usar Velocity.js. http://velocityjs.org/ Por ejemplo:

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