From 34d7734efb42d82e7e060fc1bc33fe4a9ba81f2f Mon Sep 17 00:00:00 2001 From: Philipp Daun Date: Tue, 17 Feb 2026 18:01:50 +0100 Subject: [PATCH] Add note about class matching in animation selector Signed-off-by: Philipp Daun --- src/docs/options/options.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/docs/options/options.md b/src/docs/options/options.md index 0051e3f1..e250b416 100644 --- a/src/docs/options/options.md +++ b/src/docs/options/options.md @@ -44,7 +44,7 @@ const swup = new Swup({ The selector for detecting animation timing. Swup will wait for all CSS transitions and keyframe animations to finish on these elements before swapping in the content of the new page. -The default option will select all elements with class names beginning in `transition-`. +The default option will select all elements with class names containing `transition-`. ```javascript { @@ -52,6 +52,12 @@ The default option will select all elements with class names beginning in `trans } ``` +> [!NOTE] Note about class matching +> Technically, the `*=` comparison in the selector will include classes containing the +> pattern at any position, such as `my-transition-class`. To avoid this, consider using a stricter +> selector, e.g. `class^="transition-"]` which would require the transition class to come at the +> beginning of the class attribute, or `class~="transition-fade"` to target a specific transition class. + ## animationScope The elements on which swup will add the [animation classes](/getting-started/how-it-works/#animation-classes)