How to add CSS transition on closing event of a details tag?

Question

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?

guest271314 · Accepted Answer · 2017-04-17T00:01:15.953

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>

it has a bug, if animation doesn't finish it doesn't remove the .close class . — vlk, Apr 16 '17 at 23:20

score 1 · Answer 2 · answered Apr 16 '17 at 23:11

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>

score 0 · Answer 3 · answered Apr 16 '17 at 23:07

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>

How to add CSS transition on closing event of a details tag?

3 Answers3