Pianist | 
Software Developer @microsoft | 
React, CSS, state machines, animations | 
@keyframers | 
Creator of XState
U tweetove putem weba ili aplikacija drugih proizvođača možete dodati podatke o lokaciji, kao što su grad ili točna lokacija. Povijest lokacija tweetova uvijek možete izbrisati. Saznajte više
Framework animation tip: you don't always need to render `null` (or nothing) when you want some view to disappear. Try the `hidden` attribute instead! You can target it with CSS and create smooth entry/exit animations.
Example in React: https://codesandbox.io/s/funny-wind-p59ei …pic.twitter.com/0yTHsWc8sY
We tend to render nothing because we don't always know how to overlay two views in exactly the same position.
CSS Grid makes this easy (thanks @shshaw for the technique)!
On the parent:
grid-template: 1 / 1;
On the children:
grid-area: 1 / 1;pic.twitter.com/2Z3UATLhvr
![section {
display: grid;
grid-template: 1 / 1;
}
section > article {
grid-area: 1 / 1;
}
article {
transition: all .3s .3s cubic-bezier(.5, 0, .5, 1);
transition-property: opacity, transform;
}
article[hidden] {
transition-delay: 0s;
opacity: 0;
transform: scale(0.8);
}](https://pbs.twimg.com/media/EME5QQ-XsAAbqKK.jpg)
![const screens = ['First screen', 'Second screen', 'Third screen'];
function App() {
const [index, setIndex] = useState(0);
return (
<section onClick={() => setIndex((index + 1) % screens.length)}>
{screens.map((screen, i) => {
return <article key={i} hidden={i !== index || undefined}>
{screen}
</article>;
})}
</section>
);
}](https://pbs.twimg.com/media/EME5QRmXsAEMXVe.jpg)
Also, the `hidden` attribute is 
accessible . More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden …
It's okay to keep elements in the DOM. It's not like you have to pay DOM rent for them to stay there. 
cc. @sebmarkbage @dan_abramov @rachelnabors since I know you've all been thinking about animation in React recently.
There's more to this idea, and a lot of unwarranted complexity arises from trying to animate components that... you know, don't exist anymore (removed from DOM).
That's a nice way to transition-out! From my perspective though the main pain in transitioning elements like this is that you'll still need to manually unmount them from the DOM once the animation is completed.
1. You don't always need to (you just think that you do) 2. useEffect() with a timeout to transition the "state" of an element to `null` -- you can abstract this into a custom hook, and share that timeout value with CSS via CSS Variables!
I tend to render null because I don't want to bloat the DOM with hidden elements.
You can make them disappear after a timeout that you share with CSS using CSS Variables (making a tip on that later). Having things just disappear is not a very good user experience.
Callout from mdn Note: Changing the value of the CSS display property on an element with the hidden attribute overrides the behavior. For instance, elements styled display: flex will be displayed despite the hidden attribute's presence.
Fully aware
<article> first time that I see that, useful for objects?!
Time to read up on sematic HTML.
Twitter je možda preopterećen ili ima kratkotrajnih poteškoća u radu. Pokušajte ponovno ili potražite dodatne informacije u odjeljku Status Twittera.
