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

Having trouble sending data from jQuery to Flask when the user clicks the Sign In button

What's the best way to get this jQuery code to slide in from the left side?

Ways to integrate mouse out functionalities using an if condition

Is it possible to monitor a section of a webpage's source code for any updates and notify about them?

How can we pass a function to a child component in Vue 2.0?

What is the best way to reveal a hidden div using JavaScript after a form submission?

Is it possible to utilize the function(e) multiple times within a single file?

JavaScript - Attempting to Add Objects to Array Unsuccessful

What is the impact of memory on NodeJS performance?

Fatal error in CodeIgniter occurring while invoking CSS less functions

How can I monitor and handle JavaScript errors without causing TestCafe tests to fail?

Can you provide instructions on how to insert a hyperlink onto a background image?

Encountering problems during the installation of Ionic - Error code 'EPROTO'

Creating an object efficiently by defining a pattern

Unexpected Type Error: Unable to Assign 'Render' Property to Undefined

The 1and1 Server is experiencing a 500 internal error when using Ajax and jQuery .Load() functions, but accessing the URL directly seems to

Update the displayed locations on Google Maps by fetching and displaying marker data

Importing information from the Document Object Model in Vue.js, focusing on the action attribute of a form

Nested components knockout knockout knockout! The $(document).ready() function fires off before the nested component is even loaded

There is an array present with data filled in, but unfortunately, I am unable to retrieve specific elements