javascript - Div Expand to Full Screen Smoothly on Click - Stack Overflow

admin管理员组

文章数量:1302904

I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website /

So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.

$(function() {
  $(".block").on("click", function() {
    $(this).addClass("fullscreen");
  });
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.block {
  width: 50%;
  margin: 0 auto 50px auto;
  height: 300px;
  background-color: red;
  transition: all 0.5s linear;
}
.block.fullscreen {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src=".1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>

I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/

So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.

$(function() {
  $(".block").on("click", function() {
    $(this).addClass("fullscreen");
  });
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.block {
  width: 50%;
  margin: 0 auto 50px auto;
  height: 300px;
  background-color: red;
  transition: all 0.5s linear;
}
.block.fullscreen {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>

All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj

• javascript
• jquery
• css
• css-animations

Share Improve this question Follow edited Jan 16, 2017 at 14:58 ab29007 7,75622 gold badges1919 silver badges4444 bronze badges asked Jan 16, 2017 at 13:57 James WalkerJames Walker 79522 gold badges77 silver badges2323 bronze badges 2

• 1 The problem you are running into is that you cannot transition a position property which is why you are getting that jumping look. My remendation is to use transform instead of using position. – Taylor Foster Commented Jan 16, 2017 at 14:07
• @James Walker Did the answer help you. or do tell if you are having any issues with it. – ab29007 Commented Jan 16, 2017 at 17:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Checkout http://usefulangle./post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.

When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method. Along with animating top & left, you should animate width & height as well for a smoother look.

.in-animation {
    animation: inlightbox 0.8s forwards;
    position: fixed !important;
}

@keyframes inlightbox 
{ 
    50% { 
        width: 100%;
        left: 0;
        height: 200px;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}

make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.

Here's a working snippet.

var isFullscreen = false;
$("#block").click(function (){ 
    var prop = {};
    var speed = 910;
    if(!isFullscreen){ // MAXIMIZATION
       prop.width = "100%";
       prop.height = "100vh";
       isFullscreen = true;
      $("#block").animate(prop,speed); 
      setTimeout(function() { 
        $("#block").css("position","absolute");
      }, 920);
    }
    else{         
      prop.width = "50%";
      prop.height = "250px";            
      isFullscreen = false;
      $("#block").animate(prop,speed); 
      setTimeout(function() { 
        $("#block").css("position","relative"); 
      }, 920);
    }
    
});

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#block,#blockTwo{
  width:50%;
  height:250px;
  margin:0 auto;
  background-color: red;
}
#block{
  z-index:100;
}
#blockTwo{
  background-color:green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="block"></div>
<div id="blockTwo"></div>

I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:

<html>
    <head>
        <style>
            .image {
                margin: 0px;
                transition: all 0.5s linear;
                background-image: url('https://tse2.mm.bing/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
                background-repeat: no-repeat;
            }
            .image.small {
                width: 200px;
                height: 100px;  
                background-size: cover;
                background-size: 100% 100%;
            }
            .image.fullScreen {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-size: 100% 100%;
            }
            .topContent {
                display: contents;
            }
            .bottomContent {
                display: contents;
            }
            .topContent.remove {
                display: none;
            }
            .bottomContent.remove {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="topContent">
            <h1>Hello</h1>
        </div>
        <div class="image" onclick="imageChange()"></div>
        <div class="bottomContent">
            <h1>Hello</h1>
        </div>
        <script>
            window.onload = function() {
                document.querySelector('.image').classList.add('small')
            }
            function imageChange() {
                if (document.querySelector('.image').classList.contains('small')) {
                    document.querySelector('.image').classList.remove('small')
                    document.querySelector('.image').classList.add('fullScreen')
                    document.querySelector('.topContent').classList.add('remove')
                    document.querySelector('.bottomContent').classList.add('remove')
                } else {
                    document.querySelector('.topContent').classList.remove('remove')
                    document.querySelector('.bottomContent').classList.remove('remove')
                    document.querySelector('.image').classList.remove('fullScreen')
                    document.querySelector('.image').classList.add('small')
                }
            }
        </script>
    </body>
</html>

If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.

本文标签： javascriptDiv Expand to Full Screen Smoothly on ClickStack Overflow