单击时使图像填充屏幕答案

【问题标题】：Make image fill screen on click单击时使图像填充屏幕
【发布时间】：2017-06-11 09:29:43
【问题描述】：

我有一个带有标题和一些图像作为内容的布局。我想在单击任何图像时，它会扩展以适应屏幕的过渡。 jQuery 和 JS 是公平的游戏。这就是我所拥有的，由于position 的更改，我无法让它与过渡一起使用。它也应该覆盖标题而不是。

 $( document ).ready(function() {
     $( "main img" ).click(function() {
         $(this).toggleClass("click");
     });
 });

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
  transition:1s;
}

main img.click {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
  transition:1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>
<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

【问题讨论】：

要将其放在标题上，请在图片的css 中添加top:0;。

标签： javascript jquery css flexbox css-transitions

【解决方案1】：

$(document).ready(function() {

    $("img").click(function() {
        if($(this).width() == "100") {
            $($(this).clone(true)).insertAfter(this);
            $(this).css({"position" : "fixed", "z-index" : "3"});
            $(this).animate({"width" : $(window).width()-32, "height" : $(window).height()-32, "top" : "0px"}, 1000);
        }
        else {
            $(this).animate({"width" : "0px", "height" : "0px", "top" : ((($(window).height()-32)/2)-50)}, 500, function() { 
                $(this).remove();
            });
        }
    });
});

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
}

main {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
}

img {
  width: 100px;
  height: 100px;
  z-index: 2;
  position: relative;
}

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

<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

【讨论】：

那很好，但我正在寻找两件不同的东西。 1）动画从图像的原始位置开始，2）其他图像不动。
@thesecretmaster 制作动画会有点棘手，让我们说图像一直在左边以填满屏幕。（不难，但很难让动画在现实中看起来很漂亮）也许动画从页面中心开始？
@thesecretmaster 我编辑了我的答案，因此图像在动画期间不会移动，并且动画始终从页面中心开始。如果你能描述一个更好的动画创意，
也许可以使用 css3 翻译将其移动到中心，因为它的增长。