Question 45075 in Html Question posted in
Some basic documentation can be found here.

Why CSS open event of summary tag not perform? – Html

I am trying to make <detail> tag style more comfortable, and the opacity changage does not work, when I open the <detail> tag.

Here is my code:

details:not([open]) > :not(summary){
  opacity: 0;
  -webkit-transition-duration: 0.35s;
}
details[open] > :not(summary){
  opacity: 1;
  -webkit-transition-duration: 0.35s;
}
<details>
<summary>Details tag</summary>
<p>Now, it shows details</p>
</details>

I want it can change opacity gradually. I also want a CSS-only solution and the CSS could not use animate(@keyframes), because it is easier for me to maintain the website.

If someone can let the code work, it is the best solution.

Tags:

2

Answers


  1. 0 
    details > :not(summary) {
  animation: fadeIn .35s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    <details>
  <summary>Details tag</summary>
  <p>Now, it shows details</p>
</details>
    Login or Signup to reply.
  2. 0

    When details tag is collapsed, all elements except summary are hidden.
    You cannot animate from hidden state.

    When details expanded, open attribute added.
    Target open attribute.

        details[open] {
        animation: fadeIn .35s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
        <details>
        <summary>Details tag</summary>
        <p>Now, it shows details</p>
    </details>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search