调整 DIV 大小时想要流畅的动画 - JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32915005/
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
Want a Smooth Animation When Resizing DIV - JavaScript
提问by hurtbox
When I am hovering over a DIV, it increases in both height and width but I have no idea how to make it animate smoother instead of resize all at once
当我将鼠标悬停在 DIV 上时，它的高度和宽度都会增加，但我不知道如何使其动画更平滑而不是一次调整大小
function chg()
{
document.getElementById("d1").innerHTML="Great Job!";
document.getElementById("d1").style.width="300px";
document.getElementById("d1").style.height="200px";
}
function chg2()
{
document.getElementById("d1").innerHTML="Hover Over Me!";
document.getElementById("d1").style.width="230px";
document.getElementById("d1").style.height="160px";
}div
{
background-color:RGB(177,0,0);
color:white;
font-size:large;
height:160px;
width:230px;
text-align:center;
line-height:150px;
}<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>回答by Romulo
Explanation
解释
You should check out the transitionproperty in CSS3.
您应该查看transitionCSS3 中的属性。
Resources
资源
Check the following links for more information:
查看以下链接以获取更多信息：
Example
例子
function chg() {
document.getElementById("d1").innerHTML = "Great Job!";
document.getElementById("d1").style.width = "300px";
document.getElementById("d1").style.height = "200px";
}
function chg2() {
document.getElementById("d1").innerHTML = "Hover Over Me!";
document.getElementById("d1").style.width = "230px";
document.getElementById("d1").style.height = "160px";
}div {
background-color: RGB(177, 0, 0);
color: white;
font-size: large;
height: 160px;
width: 230px;
text-align: center;
line-height: 150px;
transition: all .5s linear;
}<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>回答by Jake Chasan
The best way to accomplish this would be to do a CSS3 transition when the width changes.
完成此操作的最佳方法是在宽度更改时进行 CSS3 转换。
Such as the following:
例如以下内容：
div
{
transition:width 1s ease-in-out;
}
回答by Dedi Suhaidi
with CSS3 you don't need javascript to create that effect..
使用 CSS3，你不需要 javascript 来创建这种效果..
div {
background-color:RGB(177,0,0);
color:white;
font-size:large;
height:160px;
width:230px;
text-align:center;
line-height:150px;
transition:all 1s;
}
div:hover {
height:200px;
width:300px;
}
回答by Putra Soerya
the easy way, you can use css3 transition
简单的方法，您可以使用 css3 过渡
the hard way,
艰难的道路，
var d = document,
d1 = d.querySelector("#d1");
// simple transition with javascript
function jsTransitionScale(elm, width, height, speed) {
var FPS = 60;
var original_width = elm.offsetWidth,
original_height = elm.offsetHeight;
var width_range = width - original_width,
height_range = height - original_height;
var timeout = speed / FPS,
width_change = width_range / FPS,
height_change = height_range / FPS;
var finish = new Date().getTime() + speed;
var begin = setInterval(function () {
original_width += width_change;
original_height += height_change;
elm.style.width = original_width + "px";
elm.style.height = original_height + "px";
if (new Date().getTime() >= finish) {
elm.style.width = width;
elm.style.height = height;
clearInterval(begin);
}
}, timeout);
}
function chg() {
jsTransitionScale(d1, 100, 100, 1000);
}
function chg2() {
jsTransitionScale(d1, 230, 160, 1000);
}
d1.addEventListener("mouseover", chg);
d1.addEventListener("mouseout", chg2);div {
background-color:RGB(177, 0, 0);
color:white;
font-size:large;
height:160px;
width:230px;
text-align:center;
line-height:150px;
}<div id="d1"></div>回答by Alvaro Joao
you can use:
您可以使用：
transitionproperty please read:
transition物业请阅读：
http://www.w3schools.com/css/css3_transitions.asp
http://www.w3schools.com/css/css3_transitions.asp
function chg()
{
document.getElementById("d1").innerHTML="Great Job!";
document.getElementById("d1").className="hover";
}
function chg2()
{
document.getElementById("d1").innerHTML="Hover Over Me!";
document.getElementById("d1").className="";
}div
{
background-color:RGB(177,0,0);
color:white;
font-size:large;
height:160px;
width:230px;
text-align:center;
line-height:150px;
transition: 1s ease-in-out;
}
div.hover
{
width:300px ;
height:200px;
transition: 1s ease-in-out;
}<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>