List Item Slide
Chaque nouvelle ligne entre par la gauche avec un léger dépassement (0,4 s) ; à la suppression, elle glisse de 60 px vers la droite en s'effaçant pendant que sa hauteur, ses marges et sa bordure se replient à zéro (0,4 s) : les lignes suivantes remontent en douceur au lieu de sauter. CSS et 2,9 Ko de JavaScript, fondus de 150 ms si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc .list-slide-root déclare son fond (#0a0a0f) et empile la liste .list-slide-container (260 px de large au plus, 6 px entre les lignes) au-dessus de deux boutons, « Ajouter » et « Réinitialiser ». Chaque ligne .list-slide-item porte son libellé et une croix .list-slide-remove ; fond indigo à 15 %, liseré indigo à 20 %, coins de 8 px, 40 px de haut. Au chargement, trois lignes arrivent l'une après l'autre, à 150 ms d'écart ; au-delà de cinq, l'ajout fait sortir la plus ancienne.
L'entrée est l'animation listSlideIn : 0,4 s de translateX(-40px) et opacité 0 jusqu'à la place, sur cubic-bezier(.34, 1.56, .64, 1), qui dépasse légèrement vers la droite avant de se poser. Mesuré 90 ms après le clic : 9 px avant la place et opacité 0,78 dans Chromium 151, 11 px et 0,72 dans Firefox 153. L'animation ne remplit qu'en arrière (backwards) : l'état de repos de la ligne est son état final, opacité 1 et aucune transformation, ce qui laisse la sortie libre de les animer. Une animation terminée en forwards garderait la main sur opacity et transform, et la ligne ne pourrait que se tasser sur place.
La sortie pose .list-slide-removing, qui déclare l'état d'arrivée avec transition: all 0.4s ease : max-height de 50 px à 0, marges intérieures verticales et bordure à zéro, opacité 0, translateX(60px). Mesuré 150 ms après le clic sur la croix : 37 px vers la droite, opacité 0,39 et 19 px de haut sur 40 dans Chromium, 35 px, 0,42 et 21 px dans Firefox, 38 px, 0,37 et 21 px dans WebKit 26. La ligne est retirée du DOM à 400 ms ; sa hauteur est alors nulle et les suivantes ont presque fini de remonter : seul l'écart de 6 px entre deux lignes disparaît d'un coup au retrait, un dernier saut de 3 à 8 px selon le navigateur. Un seul écouteur sur la liste gère toutes les croix, y compris celles des lignes ajoutées plus tard ; le script parcourt chaque .list-slide-root de la page, et les libellés de démonstration suivent la langue du bloc (data-lang, sinon le lang de la page).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion, l'entrée devient un fondu de 150 ms (listSlideFade) et la sortie un simple effacement de 150 ms, sans glissement ni repli ; la ligne est retirée à 150 ms et les suivantes remontent d'un coup — mesuré dans Chromium : aucune transformation, hauteur intacte pendant l'effacement. - Croix nommée : chaque croix est un
buttonavecaria-label« Retirer » suivi du libellé de la ligne (« Remove … » en anglais), le signe × seul ne disant rien à un lecteur d'écran. Elle mesure 17 × 18 px : sous les 24 × 24 px conseillés pour le doigt, portezpaddingà6px 8pxsur mobile. - Focus après suppression : le bouton qui avait le focus disparaît avec sa ligne, et le focus retombe sur la page. Dans une vraie liste, déplacez-le sur la croix de la ligne suivante (ou sur le titre de la liste) juste avant le retrait, et annoncez « Paracétamol retiré » dans une zone
aria-live. - Contraste : libellés blancs à 17,3:1 sur le fond des lignes ; la croix au repos (blanc à 40 %) donne 3,8:1, suffisant pour une icône, et passe au rouge
#ef4444au survol.
Compatibilité navigateur
Animations et transitions CSS (max-height, padding, border-width, transform, opacity) et une soixantaine de lignes de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même entrée avec dépassement, même sortie à droite avec repli, lignes suivantes qui remontent en continu, puis d'un saut de quelques pixels au retrait, fondus de 150 ms sous mouvement réduit. Le script utilise Element.closest et NodeList.forEach, présents depuis Chrome 51, Firefox 50 et Safari 10.
Sans JavaScript, la liste reste vide et les boutons ne font rien : générez les lignes côté serveur et gardez un lien ou un formulaire de suppression classique. Avec le mouvement réduit, les lignes apparaissent et disparaissent en fondu de 150 ms.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="list-slide-root">
<div class="list-slide-container">
<!-- lignes créées par le script : -->
<div class="list-slide-item">
<span>Tableau de bord</span>
<button class="list-slide-remove" type="button" aria-label="Retirer Tableau de bord">×</button>
</div>
</div>
<div style="display:flex;gap:8px;">
<button class="list-slide-btn list-slide-add" type="button">Ajouter</button>
<button class="list-slide-btn secondary list-slide-reset" type="button">Réinitialiser</button>
</div>
</div>Le code complet HTML + CSS + JS de List Item Slide, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Entrée (CSS — listSlideIn, translateX(-40px)) |
0,4 s depuis 40 px à gauche, dépassement | translateY(-12px) fait tomber la ligne d'en haut ; ease-out à la place de la courbe supprime le dépassement. Gardez backwards, sinon la sortie ne glisse plus. |
Sortie (CSS — .list-slide-removing) |
0,4 s, 60 px vers la droite | translateX(-60px) fait sortir à gauche, scale(.9) donne une ligne qui se rétracte. Si vous changez la durée, alignez le 400 du setTimeout de removeListItem. |
Hauteur maximale d'une ligne (CSS — max-height: 50px) |
50 px (une ligne fait 40 px) | C'est la hauteur de départ du repli. Pour des lignes sur deux lignes de texte, passez à 80px ; trop haut (300 px), le repli paraît retardé, car il passe d'abord par des hauteurs qui ne coupent rien. |
Nombre de lignes (JS — items.length >= 5) |
5 au plus | Au-delà, l'ajout fait sortir la plus ancienne. Supprimez ce bloc pour une liste sans limite. |
Libellés (JS — objet NAMES) |
8 libellés en français et en anglais | Ils ne servent qu'à la démonstration : dans votre page, créez les lignes avec vos données, en gardant la structure <span> + button.list-slide-remove. |
Cascade au chargement (JS — idx * 150) |
3 lignes, 150 ms d'écart, départ à 400 ms | idx * 80 donne une cascade plus serrée ; retirez le dernier setTimeout pour une liste vide au départ. |
FAQ
max-height et non height, car height: auto ne s'anime pas.removeListItem : fetch('/api/items/' + id, { method: 'DELETE' }).then(function (r) { if (r.ok) removeListItem(item); });, avec l'identifiant posé en data-id sur la ligne. La ligne ne sort qu'une fois la suppression confirmée ; en cas d'échec, elle reste en place et vous pouvez afficher un message.
