Menu
Using just CSS3, is there a way to add a nice fade-in and slide-from-left transition effect on a DETAILS/SUMMARY reveal?
For a demo of this new tag, see this demo:
details { transition:height 3s ease-in; }<details> <summary>Copyright 1999-2014.</summary> <section> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </section> </details>In my case, after the summary tag, I put all other content in its own section tag so that I could style it because summary:after selector didn't seem to work. I tried using CSS3 transitions on height for the section and details tag, but it didn't help.
265
To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property.
The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. Note: The <summary> element should be the first child element of the <details> element.
This should fix it.
details[open] summary ~ * { animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0; margin-left: -10px} 100% {opacity: 1; margin-left: 0px} }<details> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>Some credit goes to Andrew for pointing this out. I adapted his answer. Here's how this works. By adding the [open] attribute on the DETAILS tag, it only fires the animation keyframe when clicked. Then, by adding SUMMARY ~ * it means "all elements after the SUMMARY tag" so that the animation applies to those, and not the SUMMARY element as well.
162
In addition to Volomike's answer, it would be possible to change margin-left to transform: translateX() for performance reasons.
details[open] summary ~ * { animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0; transform: translateX(-10px)} 100% {opacity: 1; transform: translateX(0)} }<details> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
