Question

点击时，我想让div平滑地展开到全屏。我要使用的最终产品类似于用户点击此网站上的案例研究时https://infinum.co/

到目前为止，我的代码可以使div全屏但由于我添加的位置固定而跳转。我不担心实际动画是由CSS还是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.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>

到目前为止，我可以在这支钢笔上找到所有内容：http://codepen.io/anon/pen/RKGeYj

Answer 1

首先制作#block全屏，然后在超过全屏动画速度的延迟后应用position:absolute;。

这是一个工作片段。

＆＃13;

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);
    }
    
});

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="block"></div>
<div id="blockTwo"></div>

＆＃13;

Answer 2

Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript。它包含您正在寻找的动画。

当你将这个位置固定时，你应该给出最初的 top ＆amp; 左属性。你可以得到最初的 top ＆amp;使用 getBoundingClientRect 方法左属性。随着动画顶部＆amp; left ，您应该为 width ＆amp;添加动画。身高以及更平滑的外观。

.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;
    }
}

Answer 3

我尝试了另一种方法。我使用Javascript onclick函数添加和删除了类列表。为了使图像仅占整个页面的大小，而不是在图像上方页面顶部有文本或内容的情况下向下扩展，我将这些图像放在div中，并在那里使用类列表来删除或添加这些区域如果图片扩大了。为此，您需要拉伸图像。如果这适合您的网站，请尝试以下代码：

<html>
    <head>
        <style>
            .image {
                margin: 0px;
                transition: all 0.5s linear;
                background-image: url('https://tse2.mm.bing.net/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>

如果您希望图像一直延伸到最边缘，那应该很有可能。此外，使用班级列表，您甚至可以将背景变黑以创建黑色边框。

Div在点击时平滑地扩展到全屏

3 个答案: