Telegram Group & Telegram Channel
TransitionEvent

Animatsiya bilan bir qatorda transition'lar haqida ham gaplashsak.

Buni qarangki, CSS orqali boshqariladigan transition'larni JS bilan kuzatish imkoni ham bor ekan.
Buni ham yaqinda bilib qoldim. 🤯

Masalan, ":hover" qilganda kengayadigan elementni olaylik:


#box {
width: 50px;
transition: 2s;
transition-dalay: .5s;

&:hover {
width: 100px;
}
}


Aytaylik, keygayib kichrayyotgan paytda, element ichidagi tugmacha yoki linklar "disabled" bo'lishi kerak (JS bilan). Buni qanday qilardingiz?

Misol uchun men "mouseenter", "mouseleave" event'laridan foydalanib, "setTimeout" orqali transition tugashini kuzatardim. Bunda albatta "timeout" vaqti "transition-duration" + "delay" ga teng bo'ladi.
Tepadagi misolga ko'ra 2 + 0.5 = 2.5 sekund.

Bu usul ishlaydi. Lekin ikkovi bir-biriga bog'liq bo'magan parallel operatsiyalar hisoblanadi. Chunki sinxronizatsiyani "qo'lda" qilyapmiz.

TransitionEvent bilan esa buni qilish ancha sodda:


const box = document.getElementById('#box');

box.addEventListener('transitionstart', () => button.disabled = true)
box.addEventListener('transitionend', () => button.disabled = false)


TransitionEvent o'zi 4 ta event'dan iborat:

1. transitionrun - transition'ni boshlovchi even sodir bo'lganda (hover, focus, click, v.h.k.) va "delay" taymeri boshalanganda.

2. transitionstart - aynan transition boshlangada, ya'ni o'zgarish boshlanganda; "delay" taymeri tugagadan keyin.

3. transitionend - transition tugaganda, ya'ni element o'zgarishi tugagach.

4. transitioncancel - transition paytida uni bekor qiladigan event sodir bo'lganda, ya'ni `transitionrun`'dan keyin, `transitionend`'dan oldin.



tg-me.com/brogrammist/186
Create:
Last Update:

TransitionEvent

Animatsiya bilan bir qatorda transition'lar haqida ham gaplashsak.

Buni qarangki, CSS orqali boshqariladigan transition'larni JS bilan kuzatish imkoni ham bor ekan.
Buni ham yaqinda bilib qoldim. 🤯

Masalan, ":hover" qilganda kengayadigan elementni olaylik:


#box {
width: 50px;
transition: 2s;
transition-dalay: .5s;

&:hover {
width: 100px;
}
}


Aytaylik, keygayib kichrayyotgan paytda, element ichidagi tugmacha yoki linklar "disabled" bo'lishi kerak (JS bilan). Buni qanday qilardingiz?

Misol uchun men "mouseenter", "mouseleave" event'laridan foydalanib, "setTimeout" orqali transition tugashini kuzatardim. Bunda albatta "timeout" vaqti "transition-duration" + "delay" ga teng bo'ladi.
Tepadagi misolga ko'ra 2 + 0.5 = 2.5 sekund.

Bu usul ishlaydi. Lekin ikkovi bir-biriga bog'liq bo'magan parallel operatsiyalar hisoblanadi. Chunki sinxronizatsiyani "qo'lda" qilyapmiz.

TransitionEvent bilan esa buni qilish ancha sodda:


const box = document.getElementById('#box');

box.addEventListener('transitionstart', () => button.disabled = true)
box.addEventListener('transitionend', () => button.disabled = false)


TransitionEvent o'zi 4 ta event'dan iborat:

1. transitionrun - transition'ni boshlovchi even sodir bo'lganda (hover, focus, click, v.h.k.) va "delay" taymeri boshalanganda.

2. transitionstart - aynan transition boshlangada, ya'ni o'zgarish boshlanganda; "delay" taymeri tugagadan keyin.

3. transitionend - transition tugaganda, ya'ni element o'zgarishi tugagach.

4. transitioncancel - transition paytida uni bekor qiladigan event sodir bo'lganda, ya'ni `transitionrun`'dan keyin, `transitionend`'dan oldin.

BY Brogrammist


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/brogrammist/186

View MORE
Open in Telegram


Brogrammist Telegram | DID YOU KNOW?

Date: |

Pinterest (PINS) Stock Sinks As Market Gains

Pinterest (PINS) closed at $71.75 in the latest trading session, marking a -0.18% move from the prior day. This change lagged the S&P 500's daily gain of 0.1%. Meanwhile, the Dow gained 0.9%, and the Nasdaq, a tech-heavy index, lost 0.59%. Heading into today, shares of the digital pinboard and shopping tool company had lost 17.41% over the past month, lagging the Computer and Technology sector's loss of 5.38% and the S&P 500's gain of 0.71% in that time. Investors will be hoping for strength from PINS as it approaches its next earnings release. The company is expected to report EPS of $0.07, up 170% from the prior-year quarter. Our most recent consensus estimate is calling for quarterly revenue of $467.87 million, up 72.05% from the year-ago period.

In many cases, the content resembled that of the marketplaces found on the dark web, a group of hidden websites that are popular among hackers and accessed using specific anonymising software.“We have recently been witnessing a 100 per cent-plus rise in Telegram usage by cybercriminals,” said Tal Samra, cyber threat analyst at Cyberint.The rise in nefarious activity comes as users flocked to the encrypted chat app earlier this year after changes to the privacy policy of Facebook-owned rival WhatsApp prompted many to seek out alternatives.Brogrammist from us


Telegram Brogrammist
FROM USA