0

I have a <details> element and I have an opening and closing animation for it. The closing animation won't play because the element closes immediately.

Here is some sample code:

details { background: pink; /* for demo purposes */ overflow: hidden; }

details[open] {
  animation: sweep .5s ease-in-out;
  animation-fill-mode: forwards;
}

details[closed] {
  animation: unsweep .5s ease-in-out !important;
  animation-fill-mode: forwards;
}

@keyframes sweep {
  from {
    height: 27px;
  }
  to {
    height: 220px;
  }
}

@keyframes unsweep {
  from {
    height: 220px;
  }
  to {
    height: 27px;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<details>
  <summary>Test</summary>This is a very cool test :)
  <br>woah
  <br>woah
</details>
merpcode
  • 11
  • 2
  • 2
    you can't really do this with css only. you're gonna have to make a custom element for this, or somehow get around this with javascript. To avoid all that headache, you could use something like bootstrap – KyloDev Apr 16 '23 at 16:03
  • Could you describe what is to happen on opening the details even? I don't think it has quite the effect you expect - yes the height increases gradually (which I can see by setting a background color) but your text is seen immediately. – A Haworth Apr 16 '23 at 16:23
  • @AHaworth sorry I made this example not from my actual project. In my project the text clips because I added `overflow: hidden;` to the parent element. I am looking for a closing animation, like the opening one but reversed. Edit: I updated the example to clip – merpcode Apr 16 '23 at 16:50
  • 1
    you can't really do this with css only [again]. `detail` elments are made this way. you can't do this with css only. – Mister Jojo Apr 16 '23 at 17:40
  • 1
    https://stackoverflow.com/questions/69958043/animate-a-details-tag-when-closing – imhvost Apr 16 '23 at 20:35

0 Answers0