Hello everyone, today I was walking around the internet to see what the Web APIs were, and suddenly I came across something very new. I asked the question: “When can these be used”. After thinking for a long time, I also found the answer
Today I try to create an animation at unmount component like. As everyone knows, adding an animation when mount component is very simple, just use the keyframes of css finish.
However, to add animation when unmount is another story, with jQuery making things easier to breathe, just use fadeIn & fadeOut , but when working with ReactJS developers are often advised not to use jQuery to touch. touch the DOM. Luckily, I also found a satisfactory API that can help me achieve this desire, which is onanimationend .
First you need a css keyframe for this animation:
1 2 3 4 5 6 7 8 9 10 11 | -- style.css <span class="token atrule"><span class="token rule">@keyframes</span> fadeIn</span> <span class="token punctuation">{</span> <span class="token selector">// Animation khi mount component 0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span> <span class="token punctuation">:</span> 1 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Create a small small component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token operator">--</span> fade <span class="token punctuation">.</span> js <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Fade</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> shouldRender <span class="token punctuation">,</span> setRender <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token operator"><</span> div style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> animation <span class="token operator">:</span> <span class="token string">"fadeIn 1s"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> shouldRender <span class="token operator">&&</span> <span class="token string">"Mount"</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Fade <span class="token punctuation">;</span> <span class="token operator">--</span> App <span class="token punctuation">.</span> js <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">"./styles.css"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Fade <span class="token keyword">from</span> <span class="token string">'./fade'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> Fade <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
After trying this code, every time you reload the page you will see the Mount text with a very nice effect, next I need a button to toggle the display of text again, adding a little bit of App.js
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token operator">--</span> <span class="token operator">--</span> <span class="token operator">-</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> show <span class="token punctuation">,</span> setShow <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">--</span> <span class="token operator">--</span> <span class="token operator">-</span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setShow</span> <span class="token punctuation">(</span> <span class="token operator">!</span> show <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> Click <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> |
A bit more for fade.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">const</span> <span class="token function-variable function">Fade</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">{</span> show <span class="token punctuation">}</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> shouldRender <span class="token punctuation">,</span> setRender <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> show <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setRender</span> <span class="token punctuation">(</span> show <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> show <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> shouldRender <span class="token operator">&&</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> animation <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> show <span class="token operator">?</span> <span class="token string">"fadeIn"</span> <span class="token operator">:</span> <span class="token string">"fadeOut"</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 1s</span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">></span> Mount <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
1 2 3 4 5 6 7 8 9 | <span class="token atrule"><span class="token rule">@keyframes</span> fadeOut</span> <span class="token punctuation">{</span> <span class="token selector">// Animation khi unmount component 0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span> <span class="token punctuation">:</span> 1 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Now every time you click on the Toggle mount button you will see the animation happening, but the animation when unmount is not available, absurd, I’ve added a keyframe fadeOut like fadeIn .
Analyze a little bit, so what do we do
showchanges- Tell
reacttounmount,delayit a bit - Run
animate Animatejust finished running,unmount
- Tell
reacttounmount,delayit a bit. This is whenonanimationendcomes into play, this API will automatically start when akeyframe animationfinishes, fixfade.jsa little more.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> show <span class="token punctuation">)</span> <span class="token function">setRender</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> show <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleonAnimationEnd</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> show <span class="token punctuation">)</span> <span class="token function">setRender</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> shouldRender <span class="token operator">&&</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> animation <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> show <span class="token operator">?</span> <span class="token string">"fadeIn"</span> <span class="token operator">:</span> <span class="token string">"fadeOut"</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 1s</span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> onAnimationEnd <span class="token operator">=</span> <span class="token punctuation">{</span> handleonAnimationEnd <span class="token punctuation">}</span> <span class="token operator">></span> Mount <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Everything is done, please re-code it, I have a demo here – with the addition of reusing the component If you are looking to work with the old browser, you should pay attention because it is not yet fully supported. Thank you for reading 