How does one make a transition for removing a div completely, not just visibility?-CodePudding

How do I make it so that when you hover, the original div goes away completely, not just the visibility and it has a transition in doing so and the new div doesn't show up until the transition is done? Using javascript is fine.

I know that using display doesn't allow for a transition, but it's the only thing I could think of and gives a good idea of what I'm trying to accomplish.

Here is the HTML:

<div >
   <div >Title</div>
   <div >Content</div>
</div>

And this is the CSS:

.square{
        width: 200px;
        height: 200px;
        background-color: lightblue;
}
  .content{
        display: none;
}
  .square:hover .content{
        display: block;
}
  .square:hover .title{
        display: none;
        transition-duration: 800ms;
}

CodePudding user response：

To make the original div disappear completely when you hover, and have a transition in doing so, you can use the opacity property and the transition property in your CSS.

Here's an example of how you can do this:

.square {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;  /* add this */
  transition: opacity 800ms;  /* add this */
}

.content {
  display: none;
  position: absolute;  /* add this */
  top: 0;  /* add this */
  left: 0;  /* add this */
  width: 100%;  /* add this */
  height: 100%;  /* add this */
}

.square:hover .content {
  display: block;
  opacity: 1;  /* add this */
}

.square:hover .title {
  display: none;
  opacity: 0;  /* add this */
  transition-duration: 800ms;
}

This will make the original div fade out with a transition when you hover, and the new div will be revealed behind it.

Note that the .title and .content elements need to be positioned absolutely within the .square element for this to work properly.

If you want to show the new div only after the transition is done, you can use the transitionend event in JavaScript to detect when the transition has finished and then show the new div. Here's an example of how you can do this:

const square = document.querySelector('.square');
const content = document.querySelector('.content');

square.addEventListener('transitionend', () => {
  content.style.display = 'block';
});

This will show the .content div only after the transition of the .title element has finished.

CodePudding user response：

You can use the opacity to hide the title but it would still be there. Add click-event: none to it so that it would be invisible as well as non-clickable.

Or you can use the transform: translate() to make the title move away with the transition. Add these lines (commented) to your code:

.square{
        width: 200px;
        height: 200px;
        background-color: lightblue;
        position: relative;
}
  .content{
        display: none;
        /*starts here*/
        position: absolute; /* If you want to position the content exactly under the title*/
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*ends here*/
}
  .square:hover .content{
        transform: translateX(0); /*Add here*/
        display: block;
}
  .square:hover .title{
        transform: translateX(-100%); /*Add here*/
        transition-duration: 800ms;
}

<div >
   <div >Title</div>
   <div >Content</div>
</div>