7

After reading those two questions:

I have a new one for you!

Problem

I want an animation on closing event of the <details> tag. I thought that just revert the animation of opening would do the job, but unfortunately, no.

$(function() { $('details').on('mouseover', function() { $(this).attr('open', true); }).on('mouseout', function() { $(this).attr('open', false); }).on('click', function(e) { e.preventDefault(); }) });
details[open] SUMMARY~* { animation: sweepin .5s ease-in-out; } details[close] SUMMARY~* { animation: sweepout .5s ease-in-out; } @keyframes sweepin { 0% { opacity: 0; margin-left: -10px } 100% { opacity: 1; margin-left: 0px } } @keyframes sweepout { 0% { opacity: 1; margin-left: 0px } 100% { opacity: 0; margin-left: -10px } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <details> <summary>Here my little summary</summary> <p>... Do you want more details?</p> <p>Here have some details!</p> </details>

Question

Do you think this is possible?

Improve this question

3 Answers 3

Reset to default
5

You can substitute toggling .className for details[close] selector; at mouseover event check if element is not .open, if true, set property to .open = true at mouseout event add .className, use .one() animationend event to remove .className and set .open to false at event handler. 

$(function() { $("details").on({ mouseover: function() { if (!this.open && !$(this).is(".close")) $(this).prop("open", true) .one("animationend", function() { $(this).addClass("animationDone") }) }, mouseout: function _close() { if (!$(this).is(".close") && $(this).is(".animationDone")) $(this).addClass("close") .one("animationend", function() { $(this).prop("open", false) .removeClass("close animationDone") }) }, click: function(e) { e.preventDefault(); } }) });
details[open] SUMMARY~* { animation: sweepin .5s ease-in-out; } details.close SUMMARY~* { animation: sweepout .5s ease-in-out; } @keyframes sweepin { 0% { opacity: 0; margin-left: -10px } 100% { opacity: 1; margin-left: 0px } } @keyframes sweepout { 0% { opacity: 1; margin-left: 0px } 100% { opacity: 0; margin-left: -10px } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <details> <summary>Here my little summary</summary> <p>... Do you want more details?</p> <p>Here have some details!</p> </details>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

it has a bug, if animation doesn't finish it doesn't remove the .close class .
@vlk How to reproduce bug?
try to move the mouse out before the animation is finished.
1

Sorry for change the logic, but I've found this faster and fluid.

$(function() { $('#summary').on('mouseover', function() { $('#triangleDown').fadeIn(0); $('#triangle').fadeOut(0); $('#content').addClass("open"); }).on('mouseout', function() { $('#triangleDown').fadeOut(0); $('#triangle').fadeIn(0); $('#content').removeClass("open"); }) });
#triangleDown{ display:none; } span{ font-size: 12px; } #content{ opacity:0; margin-left: 0px; -webkit-transition:all 1s; transition:all 1s; } #content.open{ opacity: 1; margin-left: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p id="summary"><span id="triangle">► </span><span id="triangleDown">▼ </span>Here my little summary</p> <div id="content"> <p>... Do you want more details?</p> <p>Here have some details!</p> </div> </div>

Improve this answer

Comments

0

You can use an animation-fill-mode property to keep the original position of the div after animation is completed. On mouseover and mouse out event, you can add and remove the open and close attribute.

See snippet below 

$(function() { $('details').on('mouseover', function() { $(this).attr('open', true); $(this).removeAttr('close', false); }).on('mouseout', function() { $(this).attr('open', false); $(this).removeAttr('open', false); $(this).attr('close', true); }).on('click', function(e) { e.preventDefault(); }) });
details[open] SUMMARY~* { animation: sweepin .5s ease-in-out; animation-fill-mode:forwards; } details[close] SUMMARY~* { animation: sweepout .5s ease-in-out; animation-fill-mode:forwards; } @keyframes sweepin { 0% { opacity: 0; margin-left: -10px } 100% { opacity: 1; margin-left: 0px } } @keyframes sweepout { 0% { opacity: 1; margin-left: 0px; } 100% { opacity: 0; margin-left: -10px } } details{ border:solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br><br><br><br> <details> <summary>Here my little summary</summary> <p>... Do you want more details?</p> <p>Here have some details!</p> </details>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.