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. 😊

[@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]

🥂😁

[@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. 👍

[@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);