Slide up/down animation with AlpineJS

With CSS it is not possible to transition the height property to auto:

1.collapsible {2 height: 0;3 overflow: hidden;4 transition: height .3s;5}6 7.collapsible.is-open {8 height: auto;9}

For years developers relied on jQuery’s (or Velocit…


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad

With CSS it is not possible to transition the height property to auto:

1.collapsible {
2  height: 0;
3  overflow: hidden;
4  transition: height .3s;
5}
6 
7.collapsible.is-open {
8  height: auto;
9}

For years developers relied on jQuery's (or Velocity's) slideUp() and slideDown() methods to perform slide up/down animations without setting a fixed height. In fact, I remember being brought into projects where jQuery was added to the project just for these 2 methods.

Here is how to implement slide up/down animation with Alpine JS.

Component set up

Start with an Alpine component with a property to manage the open state of a collapsible element. And let's add a .collapsible element.

1<div x-data="{isOpen: false}">
2  <div class="collapsible">
3    <!-- your content -->
4  </div>
5</div>

CSS

Then we add the CSS styles for the collapsed state:

1.collapsible {
2  height: 0;
3  opacity: 0;
4  overflow: hidden;
5  transition: all .4s;
6  pointer-events: none;
7}

And then we add the CSS for the expanded state (excluding the height which we'll manage with Alpine):

1.collapsible.is-open {
2  opacity: 1;
3  pointer-events: auto;
4}

The magic

What we want to do when the isOpen property is set to true:

  1. Add the .is-open class to the .collapsible element
  2. Programmatically set a height to the .collapsible element

For (1), we'll use x-bind to conditionally set a class based on the value of the isOpen property. This can be written as x-bind:class or :class:

1<div x-data="{isOpen: false}">
2  <div
3    class="collapsible"
4    :class="isOpen && 'is-open'"
5  >
6    <!-- your content -->
7  </div>
8</div>

For (2), we'll also use x-bind, but to add some inline styles. We'll add the height property and give it a value we calculate with JS.

"Calculate" is a misleading term here. We are going to literally read the height of the element using scrollHeight which includes the height of an element's visible and invisible content.

1<div x-data="{isOpen: false}">
2  <div
3    class="collapsible"
4    :class="isOpen && 'is-open'"
5    :style="isOpen && {height: $el.scrollHeight+`px`}"
6  >
7    <!-- your content -->
8  </div>
9</div>

Here is the full demo including a button to expand/collapse the element:

See the Pen AlpineJS: slide up/down animation by Hussein Al Hammad (@hus_hmd) on CodePen.


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad


Print Share Comment Cite Upload Translate Updates
APA

Hussein Al Hammad | Sciencx (2023-03-30T00:00:00+00:00) Slide up/down animation with AlpineJS. Retrieved from https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/

MLA
" » Slide up/down animation with AlpineJS." Hussein Al Hammad | Sciencx - Thursday March 30, 2023, https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/
HARVARD
Hussein Al Hammad | Sciencx Thursday March 30, 2023 » Slide up/down animation with AlpineJS., viewed ,<https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/>
VANCOUVER
Hussein Al Hammad | Sciencx - » Slide up/down animation with AlpineJS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/
CHICAGO
" » Slide up/down animation with AlpineJS." Hussein Al Hammad | Sciencx - Accessed . https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/
IEEE
" » Slide up/down animation with AlpineJS." Hussein Al Hammad | Sciencx [Online]. Available: https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/. [Accessed: ]
rf:citation
» Slide up/down animation with AlpineJS | Hussein Al Hammad | Sciencx | https://www.scien.cx/2023/03/30/slide-up-down-animation-with-alpinejs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts