2

I've used @keyframes to animate the details tag opening. Now I want to animate closing, but yet I can't find the CSS solution for this. @keyframes for closing not working. See the code snippet. Only CSS solution required.

.wrapper {
  width: 300px;
  height: 300px;
  background-color: #ecf0f1;
}
details {
  outline: none;
  background-color: #95a5a6;
  cursor: pointer;
}
summary {
  outline: none;
}
details[open] > ul {
  animation-name: fadeIn;
  animation-duration: 1s;
}
details:not([open]) > ul {
  animation-name: fadeOut;
  animation-duration: 1.6s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
<div class="wrapper">
  <details>
    <summary>Sample</summary>
    <ul>
      <li>
        <input type="radio" checked/>
        <label>Label 1</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 2</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 3</label>
      </li>
    </ul>
  </details>
</div>
Artem Z
  • 565
  • 1
  • 9
  • 19
  • try css transitions on the height property http://www.w3schools.com/css/css3_transitions.asp – Berdesdan Jul 29 '16 at 17:29
  • Did you notice you are using the same `fadeIn` keyframes for both the hiding and the showing? – Gofilord Jul 29 '16 at 17:41
  • Gofilord, thanks for pointing out, anyway it doesn't change anything. – Artem Z Jul 29 '16 at 17:46
  • 1
    As an aside, there is no point having both `fadeIn` and `fadeOut` animations. I suggest defining only `@keyframes fade` going from 0 to 1. Then for fading in you can do `animation: fade 1s linear;` and for fading out you can do `animation: fade 1s linear reverse;` – Niet the Dark Absol Jul 29 '16 at 17:51

1 Answers1

2

Due to <details> having some limitations, ive created a fiddle in which I animate a div and its content to match what your asking for.

With a Jquery Class Toggle:

$(document).ready(function(){
    $("#details").click(function(){
        $("#details").toggleClass("Close");
    });
});

and using transitions:

transition: all 0.3s linear; -webkit-transition: all 0.3s linear;

with a change to the detail tag and adding some css.

https://jsfiddle.net/14cpx9kw/2/

Also check out this answer by @morewry

anthony sottile
  • 61,815
  • 15
  • 148
  • 207
DirtyRedz
  • 566
  • 5
  • 14
  • you could use a checkbox in conjunction with #details and then use #details input:checked to turn this into a css only solution. https://css-tricks.com/the-checkbox-hack/ – Berdesdan Jul 29 '16 at 19:06
  • Can't support a solution where you replace the
    tag with a
    . It breaks the semantics and accessibility of using the details tag. Granted, it does achieve the animation effect
     – Amit Feb 27 '21 at 03:24