transition-property ගුණය

transition-property ගුණය සජීවනය වන සුමට පරිවර්තනය transition සඳහා වන CSS ගුණය සකසයි. එහි අගය ලෙස සජීවනය විය යුතු CSS ගුණයේ නම සපයනු ලැබේ. අගය all ලෙස සකසන්නේ නම් (මෙය පෙරනිමි අගයයි) - සියලුම ගුණාංග එකවර සජීවනය වේ.

වාක්‍ය රටාව

තෝරන්නා {
	transition-property: අගය;
}

උදාහරණය

කොටුව මත මූසිකය සැරිසරන්න - එය සුමටව එහි පළල වෙනස් කරනු ඇත, මන්ද transition-property ගුණයේ අගය width වේ:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

උදාහරණය . all අගය

මෙම උදාහරණයේ දී transition-property ගුණයේ අගය all වේ - එම නිසා සුමටව වෙනස් වන්නේ hover තත්වය සඳහා ලියා ඇති සියලුම ගුණාංගයි (මෙම අවස්ථාවේ එය width සහ height වේ). සියලුම වෙනස්කම් සිදුවන්නේ transition-duration ගුණයේ සකසා ඇති එකම කාලය තුළ ය:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

මේවාත් බලන්න

transition-duration ගුණය,
සුමට පරිවර්තනයේ කාල සීමාව සකසයි
transition-delay ගුණය,
සුමට පරිවර්තනයට පෙර ඇති කරන විලම්බය සකසයි
transition-timing-function ගුණය,
සුමට පරිවර්තනය සඳහා කාලීන ශ්‍රිතය සකසයි
transition ගුණය,
සුමට පරිවර්තනය සඳහා කෙටි අංකනය වේ
animation ගුණය,
එමගින් සජීවනයක් සෑදිය හැකිය