为什么 CSS 过渡到不透明度在内部的 div 上不起作用<details> ？</details>
[英]Why doesn't a CSS transition to opacity work on a div inside <details>?
问题描述
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.我还希望手风琴选项卡中的文本淡入/淡出，但出于某种原因，CSS 过渡不适用，我不明白为什么。
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>
2 个解决方案
解决方案1
0
maybe you can use,Important at your CSS Code, I've tried code that was previously unreadable.也许你可以使用，重要的是你的 CSS 代码，我已经尝试过以前不可读的代码。 after using !Important CSS code can be read well.使用!Important CSS代码后可以很好的阅读。 hope it can help you希望对你有帮助
解决方案2
-1 2022-09-27 12:46:55
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS 过渡不透明度适用于 0 到 1，但不适用于 1 到 0 - CSS transition opacity works 0 to 1 but doesn't work 1 to 0
CSS 不透明度过渡不适用于 Safari - CSS opacity transition won't work for Safari
css 过渡在我的卡片 div 上无法正常工作 - css transition doesn't work properly on my card div
CSS过渡无效 - CSS transition doesn't work
CSS转换不起作用 - CSS transition doesn't work
为什么css不能使用这个div？ - Why doesn't css work with this div?
为什么CSS过渡在新的dom中不起作用？ - why the CSS transition doesn't work in the new dom?
不透明的CSS过渡不起作用 - CSS transition for opacity does not work
按钮CSS转换在DIV中不起作用 - Button CSS transition does not work inside a DIV
不透明度转换（由额外的类触发）不会向后工作 - Opacity transition (triggered by an extra class) doesn't work backwards
相关标签