📌  相关文章
📜  HTML | DOM 样式 transitionProperty 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.644000             🧑  作者: Mango

HTML | DOM 样式 transitionProperty 属性

HTML | DOM 样式 transitionProperty 属性定义CSS属性的名称，它指定应用于CSS-transition的属性列表。

语法

以下是 transitionProperty 属性的语法:

object.style.transitionProperty="property1, property2, ...";

或者

object.style.transitionProperty="all";
属性值
  • property1, property2, ...：指定应用过渡效果的一个或多个属性名。
  • all：指定所有属性都应用过渡效果。
实例

以下示例演示如何使用 transitionProperty 属性。

<!DOCTYPE html>
<html>
<head>
	<title>transitionProperty 属性示例</title>
	<style>
	#demo{
		width: 100px;
		height: 100px;
		background-color: red;
		-webkit-transition-property: background-color;
		-moz-transition-property: background-color;
		-o-transition-property: background-color;
		transition-property: background-color;
	} 
	#demo:hover{
		background-color: green;
	}
	</style>
</head>
<body>
	<div id="demo"></div>
</body>
</html>

输出结果：

transitionProperty 属性示例

兼容性

所有主流浏览器均支持 transitionProperty 属性。

总结

transitionProperty 属性定义应该应用过渡效果的属性列表，并给予用户友好交互体验。它允许开发人员指定一个或多个属性。同时，这个属性还允许我们指定所有属性都应用过渡效果。如果需要使用 CSS 自定义过渡效果，该属性将非常有用。