Clever Geek Handbook

How do I add a CSS transition on closing a detail tag event?

After reading these two questions:

I've got a new one for you!

Problem

I want an animation on closing a tag event <details>

. I thought that simply returning the opening animation would do the job, but unfortunately not.

$(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>
Run codeHide result


Question

Do you think this is possible?

+3


source to share


3 answers


You can replace the switch .className

with a details[close]

selector; c mouseover

check event if element is not .open

if true

, set property .open = true

in mouseout

event add .className

, use .one()

animationend

event to remove, .className

and set .open

to false

in 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>
Run codeHide result


+5


source


Sorry for changing the logic, but I found this to be faster and more 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>
Run codeHide result


+1


source


You can use the tween-fill property to keep the original div position after the animation finishes. On mouseover and mouse out event, you can add and remove 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>
Run codeHide result


0


source






More articles:


All Articles