全屏动画

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>

仅添加过渡将使元素制动布局。
为了不破坏布局，您需要：

替换元素。（在“可见性”下面：隐藏元素）。
给它一个绝对的位置。
然后将其宽度设置为全屏并设置其位置的动画效果，以便覆盖它。
添加了动画，过渡

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

Answer 2

您可以在所有样式更改上添加动画，从而为 myDiv 类添加下一个属性：

/* Animate all changes */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

我将在您的示例中显示更改：

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

.myDiv{
    background:#cc0000;
    width:100px;
    height:100px;
    float:left:
    margin:15px;
    
    /*Animations*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;   
}

.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 1
    <button>Full Screen</button>
</div>

<div class="myDiv">
    my div 2 
    <button>Full Screen</button>
</div>

Answer 3

这是一个复杂的任务，但这应该使您了解其完成方式。这段代码会遇到一些问题（快速单击会堆叠setTimeout），但会出现一些基本问题。

这个想法是，您可以使用getBoundingClientRect()计算元素的当前位置，并以此设置初始位置值，这样当您将位置调整为fixed时，它看起来就好像仍然在同一位置-然后，当您使用.fullscreen css覆盖这些值时，transition属性将允许它们进行动画处理。

这里最大的问题是，如果您单击第一个div，您会注意到，它从布局中消失并导致第二个div跳到原来的位置，您可能需要一种保存方式布局。希望这可以作为起点。

function getPosition(elem){
  const rect = elem.getBoundingClientRect()
  return {
    top: rect.top,
    left: rect.left,
    width: rect.width,
    height: rect.height
  }
}

function toPx(val){
  return [val, 'px'].join('')
}

$('.myDiv').click(function(e){
  if(this.classList.contains('fullscreen')){
    this.classList.remove('fullscreen')
    setTimeout(e => this.style.position = 'static', 1000)
    //close
  } else {
    //open
    let pos = getPosition(this)
    this.style.width = toPx(pos.width)
    this.style.height = toPx(pos.height)
    this.style.top = toPx(pos.top)
    this.style.left = toPx(pos.left)
    console.log(pos)
    this.classList.add('fullscreen')
    this.style.position = 'fixed'
  }
});

.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100% !important; 
    height: 100% !important;
    top: 0 !important;
    left: 0 !important; 
 }
 
 .animateTransitions {
  transition: all 1s;
 }

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

使div从其位置动画到全屏

3 个答案:

全屏动画