Tips for incorporating a CSS transition when closing a details tag:

Question

Tips for incorporating a CSS transition when closing a details tag:

After reviewing these two questions:

How To Add CSS3 Transition With HTML5 details/summary tag reveal?
How to make <'details'> drop down on mouse hover

Here's a new question for you!

Issue

I am trying to create an animation when the <details> tag closes. I initially attempted to reverse the opening animation, but it did not work as expected.

$(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>

Inquiry

Do you believe this is achievable?

javascript jquery html css transition

Answer 1

Answer №1

If you want to toggle the .className instead of using the details[close] selector, you can do so by checking if the element is not .open during the mouseover event. If this condition is met, then set the property to .open = true. During the mouseout event, add the .className, and make use of the .one() method for the animationend event to remove the .className and set .open back to false in the 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>

Answer 2

If you want to toggle the .className instead of using the details[close] selector, you can do so by checking if the element is not .open during the mouseover event. If this condition is met, then set the property to .open = true. During the mouseout event, add the .className, and make use of the .one() method for the animationend event to remove the .className and set .open back to false in the 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>

Answer 3

Answer №2

Apologies for the change in approach, but I have discovered a quicker and smoother solution.

$(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>

Answer 4

Apologies for the change in approach, but I have discovered a quicker and smoother solution.

$(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>

Answer 5

Answer №3

To maintain the original position of a div after an animation is finished, you can utilize the animation-fill-mode property. By incorporating mouseover and mouseout events, you have the ability to include or remove the open and close attributes.

Refer to the code 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>

Answer 6

To maintain the original position of a div after an animation is finished, you can utilize the animation-fill-mode property. By incorporating mouseover and mouseout events, you have the ability to include or remove the open and close attributes.

Refer to the code 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>

Tips for incorporating a CSS transition when closing a details tag:

Answer №1

Answer №2

Answer №3

Similar questions

Encountering a d3.js runtime issue following the transition to Angular 8

Converting Byte strings to Byte arrays in Node.js using JavaScript

Exporting JSON data to an Excel file using an array of objects with embedded arrays

Creating responsive images using Bootstrap CSS framework

Determine the output based on the data received from the ajax post request

Using d3 to showcase pictures sourced from a csv file

The value of the ng-model checkbox does not update or change when the checkbox is clicked

Accessibility issues detected in Bootstrap toggle buttons

Leveraging async/await to handle the insertion of SQL data

What is the best way to ensure that my button unveils items one by one?

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

Combining Jquery Ajax with a Spring Boot controller results in the modification of dates

Mobile device scrolling glitch

Having trouble repositioning a div element in CSS

Retrieving Form Validation Error Value in AngularJS

What is the best way to calculate the combined total of radio button values using jQuery or JavaScript?

Issue with Rails 5 Bootstrap 3 Modal and Ajax functionality not functioning as expected

Exploring Angular 9: Harnessing the Power of Fork Join with an Array of

Applying the spread operator in the map function for copying objects

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding