Languages
[Edit]
PL

React - w┼éa┼Ťciwo┼Ť─ç transition (CSS)

0 points
Created by:
Dirask JS Member
3460

W tym artykule chcieliby┼Ťmy pokaza─ç, jak u┼╝ywa─ç w┼éa┼Ťciwo┼Ťci stylu┬átransition┬áw Reakcie.

Poni┼╝szy przyk┼éad przedstawia dwa obiekty styl├│w: myComponentNormal┬áoraz myComponentBig┬áz w┼éa┼Ťciwo┼Ťci─ů┬átransition┬áustawion─ů na '0.5s'. Oznacza to, ┼╝e nasz komponent b─Ödzie p┼éynnie zmienia┼é warto┼Ťci┬áswoich w┼éa┼Ťciwo┼Ťci w okre┼Ťlonym czasie (0.5s).

Uruchamialne rozwi─ůzanie:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const myComponentNormal = {
    width: '120px',
    height: '120px',
    background: 'goldenrod',
    transition: '0.5s'
}

const myComponentBig = {
    width: '200px',
    height: '200px',
    background: 'yellowgreen',
    transition: '0.5s'
}

const MyComponent = () => {
    const [bigSize, setBigSize] = React.useState(false);
  	const handleClick = () => setBigSize(!bigSize);
    return (
        <div style={{height: '220px'}}>
            <div style={bigSize ? myComponentBig : myComponentNormal} >
                <button onClick={handleClick}>Zmień rozmiar</button>
            </div>
        </div>
    )
}

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent />, root );

Uwaga:
Je┼Ťli czas trwania nie zostanie okre┼Ťlony, zostanie przypisana warto┼Ť─ç domy┼Ťlna, czyli 0 (animacja b─Ödzie niewidoczna).

ReactJS (PL)

React - w┼éa┼Ťciwo┼Ť─ç transition (CSS)
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join