将 div 从其位置动画到全屏

Question

我想在点击 div 时将其展开为全屏。就像 这里的 Fiddle js 链接一样

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

$('.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

您可以在所有样式更改上添加动画，将下一个属性添加到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;

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

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