How I made toggle transition to
element

how-i-made-toggle-transition-to--element

The HTML

element allows you to expand and shrink content effortlessly. Here’s a basic implementation of

:

 id="my-details">
  Click me to expand
  

While this element is great, you might wonder how to add a smooth transition effect with CSS alone:

details#my-details {
  transition-duration: 300ms; 
}

However, using just CSS doesn’t apply any transition effect when toggling the element. To achieve this, you need to use some JavaScript.

Solution

First, wrap the content within the

element with another element. In this example, we use a

as the content wrapper:

 id="my-details">
  Click me to expand
  

Although the animation typically works as expected, there are certain conditions where you might need to apply overflow: hidden to the content wrapper to achieve the desired effect.

Next, we add the JavaScript to handle the transition effect:

const details = document.getElementById("my-details");
const summary = details.firstElementChild;
const content = summary.nextElementSibling;
let isAnimating = false;

summary.onclick = (ev) => {
  ev.preventDefault();
  if (isAnimating) return;

  const contentHeight = content.getBoundingClientRect().height;
  isAnimating = true;

  // Closing 
if (details.open) { return content .animate( { height: [contentHeight + 'px', '0px'] }, { duration: 300 } ) .finished .then(() => details.open = isAnimating = false); } // Opening
details.open = true; content.animate( { height: ['0px', contentHeight + 'px'] }, { duration: 300 } ).finished.then(() => isAnimating = false); };

Now, when you toggle the

, it will animate the transition.

But wait, how exactly does this work?

Explanation

Let’s break down the JavaScript code. The simplest way to animate an element is by using the animate() method, which accepts two arguments: keyframes and options. We’ll explore its details in another post, but here’s a quick overview.

To achieve the animation, we prevent the default behavior of the

element to disable its instant toggle functionality:

summary.onclick = (ev) => {
  ev.preventDefault();
};

Next, we obtain the height of the

content:

const contentHeight = content.getBoundingClientRect().height;

If the

is open, indicated by the open property, we animate the content height from its default height to 0px and set details.open to false after the animation ends:

// Closing 
if (details.open) { return content .animate( { height: [contentHeight + 'px', '0px'] }, { duration: 300 } ) .finished .then(() => details.open = isAnimating = false); }

When opening

, we:

  • Animate the content height from 0px to its default height.
  • Set details.open to true before the animation starts.
// Opening 
details.open = true; content.animate( { height: ['0px', contentHeight + 'px'] }, { duration: 300 } ).finished.then(() => isAnimating = false);

Understanding the isAnimating Variable

The isAnimating variable is used to determine if an animation is currently running. If an animation is in progress, further toggle actions are prevented until the animation completes:

let isAnimating = false;

summary.onclick = (ev) => {
  ev.preventDefault();
  if (isAnimating) return;

  isAnimating = true; // mark as not done

  content.animate(/* ... */)
  .finished
  .then(() => isAnimating = false) // mark as done
};

Conclusion

These transition effects aren’t limited to height changes. You can use any CSS properties to animate the

element. The animate() method is a powerful way to create engaging, visually appealing web interactions.

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
16-front-end-code-snippets-worth-checking-out

16 Front-End Code Snippets Worth Checking Out

Next Post
fix-insufficient-tls-in-laravel:-guide-with-free-security-tools

Fix Insufficient TLS in Laravel: Guide with Free Security Tools

Related Posts