Coder des Notifications Toast Animées en JavaScript

[@philousk9482]

J'aime beaucoup la théorie du reset flow. Les détails sont importants. Merci pour ce Tuto très informatif. 😊

[@lazone413]

Très bonne explication, y'a des trucs que croyais savoir, met là j'ai eu plus de détails. Merci beaucoup. Force à toi.

[@EcoleduWeb]

Merci beaucoup, il y a toujours quelque chose à découvrir ou à affiner en dev web, on en apprend tous les jours. 👍

[@grogustrentz7753]

Milles Mercis Top Extraordinaire J'aime tes challenges ils sont là pour nous donner confiance tu nous conduit toujours plus haut Merveilleux Merci 💖

[@EcoleduWeb]

Merci beaucoup, je suis content que ça t'ait plu ! 🙏

[@herve_craft]

J'aime les toasts salé :) Ok je sors. Superbe vidéo, je ne connaissais pas. Merci

[@EcoleduWeb]

🥂😁

[@ismailtahlepoque]

Video super intéressante j'ai juste une question, pourquoi ne pas mettre progressBar.style.transform = "scaleX(0)" (et transition none) dans le setTimeout comme ça elle revient 0 au lieu de recrée une fonction ?

[@dihcarkouane7020]

Pourquoi ne pas utiliser clamp, pour le width. Je le vois trop peux utilisé, il nest pas suffisamment supporté a ton goût ? Merci pour ta réponse

[@EcoleduWeb]

Je n’y ai tout simplement pas pensé, mais on peut l’utiliser en effet 👍. Le support est bon.

[@lmz-dev]

Et avec elmt.animate c'est pas plus simple ?

[@EcoleduWeb]

On peut faire une version avec animate, mais je ne dirais pas que c'est forcement plus concis ou simple à comprendre.

[@lmz-dev]

@@EcoleduWeb C'est pas simple mais on y arrive ;p let opa, options = {duration: 200, fill: 'both'}, anim = bar.animate({scale: ['0 1', '1 1']}, {duration: 1000, fill: 'both'}), show = (removed) => { if (removed) document.body.append(toast), opa = toast.animate({opacity: [0, 1]}, options), opa.onfinish = e => anim.play(); else anim.cancel(), anim.play(); }, remove = () => {anim.cancel(), toast.remove(), toast.style.display = 'block', bar.style.scale = '0 1';}; remove(); anim.onfinish = e => { opa = toast.animate({opacity: [1, 0]}, options); opa.onfinish = e => remove(); }; btn.onclick = e => show(!toast.offsetWidth);