如何使用jquery为scale css属性设置动画？

Question

当我使用jQuery单击一个按钮时,我试图使用"bubble"类来创建一个圆形div.我想让它从零开始出现并增长到它的全尺寸,但我无法让它工作.继承我的代码:

HTML显示泡泡...... CSS

.bubble {
    transform: scale(0);
}

使用Javascript

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

Answer 1

您可以使用CSS执行转换,然后只使用Javascript作为'switch',它会添加类以启动动画.试试这个:

$('button').click(function() {
  $('.bubble').toggleClass('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>Toggle</button>
<div class='col-lg-2 col-md-2 well bubble'></div>

Answer 2

目前你不能使用animate该transform属性看到这里

但是,您可以添加css transition值并修改css本身.

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

最好使用 CSS3 动画。对于频繁间隔的动画，您可以使用支持前缀的浏览器（-webkit、-moz 等）-

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

请参阅此链接 - http://www.w3schools.com/css/css3_animations.asp

或者 @Rory 的上述解决方案也是在附加事件上添加类的好方法。