javascript - 将 div 从其位置动画到全屏

Question

我想在点击一个 div 时将其展开为全屏。就像 this Fiddle js link here

我想从它的位置开始动画。如果我单击该框，感觉就像从它的位置扩展，请帮助我实现这一目标

$('.myDiv').click(function(e){
    $(this).toggleClass('fullscreen'); 
});

.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
               my div
              <button>Full Screen</button>
   </div>
   
   <div class="myDiv">
               my div 2 
              <button>Full Screen</button>
   </div>

Answer 1

全屏动画

现在让元素全屏显示非常简单。它可以单独使用 css 来完成。

.content {
  display: inline-grid;
  width: 150px;
  height: 100px;
  background-color: cornflowerblue;
  border-radius: 3px;
  transition: width 2s, height 2s;
  margin: 10px;
}

.content button {
  display: inline-block;
  justify-self: center;
  align-self: center;
  height: 2em;
}

.content:hover {
  width: 100vw;
  height: 1200vh;
}

<div class="container">
  <div class="content">
    <button>Fullscreen</button>
  </div>
</div>
<div class="content"></div>

仅仅添加一个过渡将使元素停止布局。
为了不破坏你需要的布局:

1. 替换元素。 (在可见性下方:隐藏元素)。
2. 给它一个绝对位置。
3. 然后将它的宽度设置为全屏并设置它的位置动画以便它可以覆盖它。
4. 添加了动画、过渡

//Function is run on page load
$(function() {
  var full = $(".fullscreen");
  //Loops over all elements that have the class fullscreen
  full.each(function(index, elem) {
    $(elem).click(fullscreenClick);
  });

  function fullscreenClick() {
    //The button is this
    //We want to clone the parent
    var box = $(this).parent();
    //create a holder box so the layout stays the same
    var holder = $(box).clone(false, true);
    //and make it not visible
    $(holder).css({
      "visibility": "hidden"
    });

    //Get its position
    var pos = $(box).position();

    //Substitute our box with our holder
    $(box).before($(holder));

    //Set the position of our box (not holder)
    //Give it absolute position (eg. outside our set structure)
    $(box).css({
      "position": "absolute",
      "left": pos.left + "px",
      "top": pos.top + "px",
    });

    //Set class so it can be animated
    $(box).addClass("fullscreen");

    //Animate the position
    $(box).animate({
      "top": 0,
      "left": 0,
    }, 3000);

  }
});

* {
  margin: 0;
  padding: 0;
}

.container {
  display: inline-block;
}

.container .element {
  display: inline-block;
  background-color: cornflowerblue;
  margin: 5px;
  padding: 10px;
  width: 70px;
  height: 30px;
  transition: width 3s, height 3s;
  ;
}

.container .element.fullscreen {
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
  <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
</div>