div点击后平滑展开到全屏答案

【问题标题】：Div Expand to Full Screen Smoothly on Clickdiv点击后平滑展开到全屏
【发布时间】：2020-12-31 23:03:50
【问题描述】：

我试图让一个 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

【问题讨论】：

你遇到的问题是你不能transition 一个position 属性，这就是你得到那种跳跃外观的原因。我的建议是使用transform 而不是position。
@James Walker 答案是否对您有所帮助。或者告诉你是否有任何问题。

标签： javascript jquery css css-animations

【解决方案1】：

首先使您的#block 全屏，然后在大于全屏动画速度的延迟后应用position:absolute;。

这是一个有效的 sn-p。

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

【讨论】：

【解决方案2】：

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

当您将位置设置为固定时，您还应该提供初始 top 和 left 属性。您可以使用 getBoundingClientRect 方法获取初始 top 和 left 属性。除了动画 top 和 left，您还应该动画 width 和 height 以获得更平滑的外观。 p>

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

【讨论】：

【解决方案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>

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

【讨论】：