Why doesn't a CSS transition to opacity work on a div inside <details>?-CodePudding

I have a simple accordion with transitions to make the opening/closing smooth. I also want the text within the accordion tab to fade in/out, but for some reason the CSS transition isn't applying and I can't understand why.

Any help would be appreciated!

details {
  padding: 10px;
  border-bottom: 1px solid;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details div {
  opacity: 0;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
}

details[open] summary {
  margin-bottom: 10px;
}

details[open] div {
  opacity: 1;
}

<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>

CodePudding user response：

maybe you can use !Important at your CSS Code, I've tried code that was previously unreadable, after using !Important CSS code can be read well. hope it can help you

CodePudding user response：

Use keyframe instead

details {
  padding: 10px;
  border-bottom: 1px solid;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details[open] summary {
  margin-bottom: 10px;
}

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

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}

<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>