Smooth animation of the lower div after removal of the upper div

Asked

Viewed 240 times

2

Follows code below. Basically I wanted the div.div2 had a smoother 'climb':

<!DOCTYPE html>
    <html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body{
                margin: 0; padding: 0;
            }
            div{
                width: 90%;
                height: 50px;
                background-color: red;
                margin: 20px auto;
            }
            .div1{
                animation: anim 2s forwards;
                animation-delay: 2s;
            }
            .div2{
    
            }
    
            @keyframes anim{
                0%{
                    transform: translateX(0%);
                }
                100%{
                    transform: translateX(-200%);
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <div class="div1">
        </div>
        
        <div class="div2">
        </div>
    </body>
    
    <script>
        $(document).ready(function(){
            setTimeout( function () {
                $('.div1').remove();
            }, 3000);
        });
    </script>
    
    </html>

javascript css html5 css3 front-end

  • This type of transition is usually done by transitioning the height of the element up to 0px and then removing the element.

  • Fernando I understand, but the top div can not be transitioned this way because it has data that should be displayed...

  • If the height The removal of the element will not be smooth. But note that I have not said that the element needs to be visible. You can, for example, transition the opacity of 1 until 0, and only after that to height. That way the content will not be "flattened" in the animation.

1 answer

3


You can use the .animate() of jQuery. After the .setTimeout(), take the negative difference of the position of the second div of the first relative to the top, then you animate the second div before removing the first using the negative value.

For example: div1 is 20px from the top, and the div2 90px, so the difference is 70px. Then you will apply -70px in animation with the property top. When the div1 is removed, you return the div to position top: 0, because the div1 will no longer take up space on the page.

To do this, you also need to place the property in the CSS position: relative in div2 to be able to move it:

See working:

$(document).ready(function(){
  setTimeout( function () {
      var d1 = $('.div1').offset().top;
      var d2 = $('.div2').offset().top;

      $('.div2').animate({
         top: -(d2-d1)} , 500, function(){
            $('.div1').remove();
            $(this).css("top", "0");
      });
  }, 3000);
});
body{
   margin: 0; padding: 0;
}
div{
   width: 90%;
   height: 50px;
   background-color: red;
   margin: 20px auto;
}
.div1{
   animation: anim 2s forwards;
   animation-delay: 2s;
}
.div2{
  position: relative;
}

@keyframes anim{
   0%{
       transform: translateX(0%);
   }
   100%{
       transform: translateX(-200%);
       display: none;
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>

You control the speed of the animation by increasing or decreasing the value 500. If it increases, the animation lasts longer; if it decreases, faster. This value is in milliseconds, ie, 500 means half a second.

Generic shape with action at the click of a button: JSFIDDLE

  • Got it! Sam, how do I generalize to n Ivs. Where any of them can be removed?

  • But you are doing animation in CSS. Soon you know that div is being removed

  • But this example is different from my real code, in real it is a list of products in a cart, so the customer can remove any of the "Divs"

  • Oh yes. Then disclosure is removed at the click of a button

  • Yeah, basically that’s it.

  • So it’s more complex. I’ll have to redo the code. Later I do pq now I’m on the street.

  • Tomorrow I make for you... It’s my machine is in maintenance

  • Thank you Sam, I await your reply friend.

  • I added at the end of the reply a link to Jsfiddle.

Show 4 more comments

Browser other questions tagged javascript css html5 css3 front-end

You are not signed in. Login or sign up in order to post.