Describe the problem 🧐
The default animation selector doesn't behave as described in the docs:
The default option will select all elements with class names beginning in transition-.
The selector containing an asterisk class*="transition-" is matching everything containing a class with given selector, including class="something-transition-else".
f.ex.
<header id="header" class="header-transition-start">
…
</header>
<main id="swup" class="transition-main">
…
</main>
On my current project the transition time accumulated due to several non-related and prefixed transitions. I didn't know why until I took a closer look at the default selector.
Describe the propsed solution 😎
Could you either reflect it in the docs (containing instead of beginning), or change the default selector to '[class^="transition-"]'?
Alternatives considered 🤔
Of course it's easy to change the selector it in the options during initialization. 🤝
{
animationSelector: '[class^="transition-"]'
}
How important is this feature to you? 🧭
Nice to have
Checked all these? 📚
Describe the problem 🧐
The default animation selector doesn't behave as described in the docs:
The selector containing an asterisk
class*="transition-"is matching everything containing a class with given selector, includingclass="something-transition-else".f.ex.
On my current project the transition time accumulated due to several non-related and prefixed transitions. I didn't know why until I took a closer look at the default selector.
Describe the propsed solution 😎
Could you either reflect it in the docs (containing instead of beginning), or change the default selector to
'[class^="transition-"]'?Alternatives considered 🤔
Of course it's easy to change the selector it in the options during initialization. 🤝
How important is this feature to you? 🧭
Nice to have
Checked all these? 📚