Javascript 如何使用 jquery 为缩放 css 属性设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35429935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I animate a scale css property using jquery?
提问by Weylin Wagnon
I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code:
我试图在使用 jQuery 单击按钮时弹出一个带有“气泡”类的圆形 div。我想让它从无到有出现并长到它的全尺寸，但我无法让它工作。继承人我的代码：
HTML Show bubble ... CSS
HTML 显示气泡 ... CSS
.bubble {
transform: scale(0);
}
Javascript
Javascript
$('button').click(function(){
$('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
});
回答by Rory McCrossan
You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this:
您可以使用 CSS 执行过渡，然后仅使用 Javascript 作为“开关”，它添加类以启动动画。尝试这个：
$('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>回答by 8eecf0d2
Currently you cannot use animatewith the transformproperty see here
目前您不能animate与该transform物业一起使用，请参阅此处
However you can add a css transitionvalue and modify the css itself.
但是，您可以添加 csstransition值并修改 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>回答by Himanshu Aggarwal
Better go with CSS3 Animations. For animation at a frequent interval you can use with browser supporting prefixes(-webkit,-moz,etc.)-
最好使用 CSS3 动画。对于频繁间隔的动画，您可以使用支持前缀的浏览器（-webkit、-moz 等）-
@keyframes fullScale{
from{
transform:scale(0);
}
to{
transform:scale(1);
}
}
.bubble:hover{
animation: fullScale 5s;
}
Refer this link- http://www.w3schools.com/css/css3_animations.asp
请参阅此链接 - http://www.w3schools.com/css/css3_animations.asp
Or the above solution by @Rory is also a good way to addclass on an attached event.
或者@Rory 的上述解决方案也是在附加事件上添加类的好方法。
回答by shu
You can use Velocity.js. http://velocityjs.org/For example:
您可以使用 Velocity.js。 http://velocityjs.org/例如：
$("div").velocity({
"opacity" : 0,
"scale" : 0.0001
},1800)
