Div在单击时平滑扩展到全屏 [英] Div Expand to Full Screen Smoothly on Click

问题描述

我正在尝试使div在单击时平滑扩展到全屏.我要使用的最终产品类似于用户单击此网站上的案例研究时 https://infinum.co//

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/

到目前为止，我的代码可以使div全屏显示，但由于我添加的固定位置，它会跳转.我不介意实际的动画是由CSS还是由JavaScript/jQuery处理.

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

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

推荐答案

结帐

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

将位置固定后，您应该给出首字母 top &以及 left 属性.您可以获取初始的 top &使用 getBoundingClientRect 方法的 left 属性. 加上动画 top 和& left ，您应该为 width &设置动画.高度 也更平滑.

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

这篇关于Div在单击时平滑扩展到全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！