🏋️♂️ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
MIT License
Bot releases are visible (Hide)
Published by smastrom 6 months ago
Force expand/collapse if unable to properly query scrollHeight
in some consumer's implementation-related edge cases, thanks @oleh-selivanov - #25
Published by smastrom 6 months ago
onTransitionEnd
height comparison, thanks @krzysztof-krzeszewski - #26Published by smastrom 8 months ago
Add additional condition for checking undefined CSS transition required for Firefox 124+ - #23 - Thanks @andreww2012
Published by smastrom 10 months ago
<Collapse />
was displayed as expanded on initial render until JS was loaded (if collapsed). #22 - Thanks @zhaivoronokrequestAnimationFrame
is availablePublished by smastrom almost 1 year ago
This patch release doesn't bring any new feature nor fix. It is just a "courtesy-release" to enable from now on, publishments via the newly introduced npm provenance statements.
I also took the chance to improve a bit the (one year old) codebase by:
defineOptions
in the setup blockPublished by smastrom about 1 year ago
Fixed a bug on iOS where getAutoDuration
returned Infinity if visually hidden styles were applied just right before calling it.
Published by smastrom about 1 year ago
display: none
.Published by smastrom about 1 year ago
requestAnimationFrame
call per expand/collapse. This was achieved by streamlining the logic behind retrieving the auto duration value, which is now only captured on mount.margin: 0
and border: 0
on the Collapse element fixed styles.baseHeight
dynamically updates to 0 on collapsed state, display: hidden
is now added on the Collapse element styles.Published by smastrom about 1 year ago
The next minor release of vue-collapsed
brings a lot of improvements and a new feature.
height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1)
.prefers-reduced-motion: reduce
and the ability to manually disable transitions via CSS.Callback props have been replaced by emits. This won't break any functionality, as Vue emits can also be defined using the previous props' syntax (onCollapsed
, onExpand
, etc).
If you were using them, you can update your code as displayed below.
Pre v1.2
<Collapse :when="isExpanded" :onExpand="callback">
<p>This is a paragraph.</p>
</Collapse>
v1.2
<Collapse :when="isExpanded" @expand="callback">
<p>This is a paragraph.</p>
</Collapse>
vite-plugin-dts
configuration for better types generation