transition-delay հատկությունը
transition-delay հատկությունը սահմանում է
ուշացում հարթ անցումը մեկնարկելուց առաջ
transition:
Շարահյուսություն
ընտրիչ {
transition-delay: ժամանակը s-ով կամ ms-ով;
}
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
s |
Սահմանում է ժամանակը վայրկյաններով (օրինակ 3s):
Կարելի է սահմանել կոտորակային արժեքներ,
օրինակ՝ 0.5s - կես վայրկյան:
|
ms |
Սահմանում է ժամանակը միլիվայրկյաններով (օրինակ 3ms):
Մեկ վայրկյանը 1000 միլիվայրկյան է:
|
Լռելյայն արժեքը՝ 0s:
Օրինակ
Մկնիկը տեղափոխեք բլոկի վրա - 3 վայրկյան
ոչինչ չի պատահի (կա 3s ուշացում),
ապա այն հարթ կերպով կփոխի իր լայնությունը
2 վայրկյանում: Եթե այնուհետև հեռացնեք մկնիկը
- կրկին 3 վայրկյան ոչինչ չի
պատահի, ապա լայնությունը հարթ կերպով կնվազի
մինչև սկզբնական արժեքը:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Օրինակ
Մկնիկը տեղափոխեք բլոկի վրա - այն նախ կփոխի
իր լայնությունը 2 վայրկյանում, ապա
կփոխի իր բարձրությունը 4 վայրկյանում:
Հատկությունները կփոխվեն հաջորդաբար,
քանի որ բարձրության համար սահմանված է 3
վայրկյան ուշացում (լայնությունը փոխելու ժամանակը): Եթե հեռացնեք
մկնիկը - ապա փոփոխությունները տեղի կունենան հակառակ
հերթականությամբ՝ նախ կնվազի լայնությունը, ապա
կնվազի բարձրությունը:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Տես նաև
-
transition-propertyհատկությունը,
որը սահմանում է հատկության անունը հարթ անցման համար -
transition-durationհատկությունը,
որը սահմանում է հարթ անցման տևողությունը -
transition-timing-functionհատկությունը,
որը սահմանում է ժամանակային ֆունկցիան հարթ անցման համար -
transitionհատկությունը,
որը հանդիսանում է հարթ անցման համար հապավում -
animationհատկությունը,
որի օգնությամբ կարելի է անիմացիա ստեղծել