📅 最后修改于: 2023-12-03 15:31:13.639000 🧑 作者: Mango
HTML | DOM 样式 transitionDuration 属性用于设置元素过度效果的持续时间。
过渡效果是指元素从一种样式过渡到另一种样式。比如，当通过 JavaScript 修改元素样式时，使用过度效果可以使元素的变化更加平滑。transitionDuration 属性用于设置过度效果的持续时间，以秒（s）为单位。
element.style.transitionDuration = "time";
或者
element.style.transitionDuration = "time1, time2, ... , timen";
以下示例展示了如何使用 transitionDuration 属性设置元素的过度效果的持续时间。
<!DOCTYPE html>
<html>
<head>
<title>Transition Duration Example</title>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
transition-property: background-color, width, height;
transition-duration: 2s, 1s, 0.5s;
}
.box:hover {
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在上面的示例中，当鼠标悬停在元素上时，元素的背景颜色、宽度和高度将发生过度效果。其中，背景颜色的过渡时间为 2 秒，宽度的过渡时间为 1 秒，高度的过渡时间为 0.5 秒。