Style transitionProperty ਵਿਸ਼ੇਸ਼ਤਾ
- ਪਿੰਡ ਪੰਨਾ transition
- ਅਗਲਾ ਪੰਨਾ transitionDuration
- ਉੱਪਰ ਵਾਪਸ ਜਾਓ ایچ تی ایم ال ڈوم اسٹائل اوبجیکٹ
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
transitionProperty
ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ ਜੋ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰੇ (ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਜਿਸ ਵਿੱਚ ਸਪੱਸ਼ਟ ਕੀਤਾ ਗਿਆ ਹੈ ਦੇ ਸਮੇਂ ਚਲੇਗਾ)。
ਸੁਝਾਅ:ਜਦੋਂ ਯੂਜ਼ਰ ਇਲਾਕੇ ਉੱਤੇ ਮਾਉਸ ਨੂੰ ਲਗਾਉਂਦਾ ਹੈ ਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ。
ਟਿੱਪਣੀ:ਹਰ ਸਮੇਂ ਇਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ transitionDuration ਵਿਸ਼ੇਸ਼ਤਾਨਹੀਂ ਤਾਂ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਦੀ ਮਿਆਦ 0 ਹੋਵੇਗੀ ਅਤੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਨਹੀਂ ਚਲੇਗਾ。
ਹੋਰ ਦੇਖੋ:
CSS ਸੰਦਰਭ ਮੁੱਲਕਾਰtransition-property ਵਿਸ਼ੇਸ਼ਤਾ
ਉਦਾਹਰਣ
div ਇਲਾਕੇ ਉੱਤੇ ਮਾਉਸ ਨੂੰ ਲਗਾਓ ਤਾਂ ਉਸ ਦੀ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਵਿੱਚ ਪਲਟਾਉਣਾ ਹੈ:
document.getElementById("myDIV").style.transitionProperty = "width,height";
ਗਣਤਰ
transitionProperty ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਪਸੀ ਮੁੱਲ ਦੇਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:
object.style.transitionProperty
transitionProperty ਵਿਸ਼ੇਸ਼ਤਾ ਸੈਟ ਕਰੋ:
object.style.transitionProperty = "none|all|property|initial|inherit"
ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ
ਮੁੱਲ | ਵਰਣਨ |
---|---|
none | ਕੋਈ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨਹੀਂ ਮਿਲੇਗਾ。 |
all | ਮੂਲਤਵੀ ਮੁੱਲ। ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਮਿਲੇਗਾ。 |
property | ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਦੇ ਸੰਸਕਰਣ ਦੀ ਸੂਚੀ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਜਿਸ ਨੂੰ ਕਮਾ ਦੇਣ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਮ ਨਾਲ ਵੰਡਿਆ ਗਿਆ ਹੈ। |
initial | ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲਤਵੀ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial. |
inherit | ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਇਲਾਕੇ ਤੋਂ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਤੋਂ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਲੈ ਲਈ ਜਾਵੇ। ਦੇਖੋ: inherit. |
ਤਕਨੀਕੀ ਵੇਰਵੇ
ਮੂਲਤਵੀ ਮੁੱਲ: | all |
---|---|
ਵਾਪਸੀ ਮੁੱਲ: | ਕ੍ਰਮਚੀਨੀ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਕਿ ਇਲਾਕੇ ਦੀ transition-property ਵਿਸ਼ੇਸ਼ਤਾ. |
CSS ਸੰਸਕਰਣ: | CSS3 |
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਸਾਰੇ ਪੈਮੈਂਟਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਖਿਆ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ。
Chrome | Edge | ਫਾਰਫੈਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
---|---|---|---|---|
Chrome | Edge | ਫਾਰਫੈਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
- ਪਿੰਡ ਪੰਨਾ transition
- ਅਗਲਾ ਪੰਨਾ transitionDuration
- ਉੱਪਰ ਵਾਪਸ ਜਾਓ ایچ تی ایم ال ڈوم اسٹائل اوبجیکٹ