Избледняване на текст в React

Статия тук: https://flatteredwithflutter.com/fade-in-out-text-in-react/

Вижте демонстрацията тук

Уебсайт: https://funwithreact.web.app/

Ще преминем през следните стъпки

1. Добавете CSS
2. Създайте Fader Component
3. Избледняваща логика
4. Страничен ефект на почистване

Добавете CSS

Нека започнем с добавяне на CSS, който ще ни помогне да постигнем ефекта на избледняване.

.fade-in {
    transition: opacity 1s ease;
}
.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
}

Имената на класовете са ясни!

Създайте Fader Component

Ние създаваме компонент за многократна употреба и го наричаме Fader. Този компонент ще включва потребителския интерфейс + бизнес логиката за постигане на затихване.

Дефинирайте подпори

• Този компонент ще приеме текстово описание, което е от тип string
• Ние също присвояваме стойност по подразбиране на текстовата подложка

Fader.defaultProps = {
    text: 'Hello World!'
}
Fader.propTypes = {
    text: PropTypes.string,
}

• Импортирайте CSS файла вътре в компонента (в нашия случай App.css)

Първоначално състояние

• Ние импортираме куката useState от React.
• Задайте първоначалната стойност на нашето свойство на fade-in

• Ние използваме това свойство и го присвояваме на нашето име на клас на Html елемент.

return (
    <>
      <h1 className={fadeProp.fade}>{text}</h1>
    </>
)

fadeProp.fade: Е името на CSS класа

text: Това е свойството Fader

Избледняваща логика

Нека въведем куката useEffect.

useEffect(callback, [prop, state]) извиква callback след като промените се ангажират в DOM и ако и само ако някоя стойност в масива на зависимости [prop, state] се е променила.

useEffect(() => {
     const timeout = setInterval(() => {
        if (fadeProp.fade === 'fade-in') {
           setFadeProp({
                fade: 'fade-out'
           })
        } else {
             setFadeProp({
                fade: 'fade-in'
             })
        }
     }, 4000);
return () => clearInterval(timeout)
}, [fadeProp])

• Използваме setInterval, който приема обратното извикване и продължителността (4 секунди в нашия случай)
• Вътре в обратното извикване setInterval проверяваме за текущото име на css клас
• Тъй като присвоихме първоначалния клас като fade-in, проверяваме за това и съответно променяме класа
• Забележете, че обратното извикване или if/else се изпълнява на всеки 4 секунди

Страничен ефект на почистване

Ако callback от useEffect(callback) върне функция, тогава useEffect() счита това за почистване на ефект:

return () => clearInterval(timeout)

• Добавяме този ред за почистване на ефекта.
• Това отменя предишния таймер, преди да започне нов.

Почистването работи по следния начин:

1. След първоначалното изобразяване useEffect() извиква обратното извикване, което има страничен ефект. В нашия случай timeout

2. При по-късни изобразявания, преди да извика следващото обратно извикване на страничен ефект, useEffect() извиква функцията clearInterval от предишното изпълнение на страничен ефект, след което изпълнява текущия страничен ефект.

3. Накрая, след демонтиране на компонента, useEffect() извиква функцията clearInterval от последния страничен ефект

Hosted URL: https://funwithreact.web.app/
Source code

Интересни статии: