web-dev-qa-db-fra.com

Comment puis-je animer une propriété css scale en utilisant jquery?

J'essaie d'avoir un cercle div avec la classe de "bulle" à apparaître lorsqu'un bouton est cliqué à l'aide de jQuery. Je veux le faire apparaître à partir de rien et atteindre sa taille maximale, mais j'ai du mal à le faire fonctionner. voici mon code:

HTML Afficher la bulle ... CSS

.bubble {
    transform: scale(0);
}

Javascript

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

Vous pouvez effectuer la transition en utilisant CSS, puis simplement utiliser Javascript comme "commutateur", ce qui ajoute la classe pour démarrer l'animation. Essaye ça:

$('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>
32
Rory McCrossan

Actuellement, vous ne pouvez pas utiliser animate avec la propriété transformvoir ici

Cependant, vous pouvez ajouter une valeur css transition et modifier le css lui-même.

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>
13
8eecf0d2

Mieux vaut aller avec CSS3 Animations. Pour une animation fréquente, vous pouvez utiliser des préfixes prenant en charge les navigateurs (-webkit, -moz, etc.) -

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

Reportez-vous à ce lien - http://www.w3schools.com/css/css3_animations.asp

Ou la solution ci-dessus de @Rory est également un bon moyen d’ajouter une classe à un événement attaché.

3
Himanshu Aggarwal

Vous pouvez utiliser Velocity.js. http://velocityjs.org/ Par exemple:

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