单击时从当前位置将div动画化为全屏大小，再次单击以将其动画化为原始大小

Question

我正在尝试模仿这种一般效果... http://www.wolfks.com/about/brand-promises#

到目前为止，我有这个... JSFiddle

JS：

 $(document).ready(function(){
    $('.people-container').click(function() {
      if ($(this).hasClass('close-animate') || !$(this).hasClass('screen-animate')) {
        $(this).removeClass('close-animate').addClass('screen-animate');
      } else {
        $(this).removeClass('screen-animate').addClass('close-animate');
      }
    });
});

CSS：

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

.people-title {
  text-align: center;
  padding: 25px;
}

.people-container {
  background: gray;
  margin-top: 10px;
  width: 100%;
  height: 100px;
  position: relative;
}

.screen-animate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  animation: fill-animate 0.5s forwards;
}

.close-animate {
  position: relative;
  width: 100%;
  height: 100px;
  animation: close-animate 0.5s;
}

/** Fill screen animation **/
@keyframes fill-animate
{ 
    50% { 
        width: 100%;
        left: 0;
        height: 50%;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}

/** Close screen animation **/
@keyframes close-animate
{ 
    50% { 
        width: 100%;
        height: 50%;
    }
    100% {
        height: 100px;
        width: 100%;
    }
}

HTML：

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>

我无法让div顺利扩展到全屏。 我不需要它完全像示例一样……基本上只是寻找全屏动画，然后从div到页面的原始位置关闭动画。

有什么帮助吗？

Answer 1

使用transition为元素的高度设置动画，您无需使用position

想法是将被单击元素的高度设置为全屏尺寸（ 100vh ），将其他元素设置为0 。

见摘要：

 $(document).ready(function() { $('.people-container').click(function() { if ($(this).hasClass('screen-animate')) { $('.people-container').removeClass('close-animate'); $(this).removeClass('screen-animate'); } else { $('.people-container').addClass('close-animate'); $(this).addClass('screen-animate'); } }); }); 

 body, html { width: 100%; height: 100%; margin: 0; } .people-title { text-align: center; padding: 10px; } .people-container { background: gray; margin-top: 10px; width: 100%; height: 100px; transition: all .5s; } .close-animate { height: 0; margin-top: 0; overflow: hidden; } .screen-animate { height: 100vh; margin-top: 0; } .close-btn { font-size: 24px; position: absolute; top: 10px; right: 10px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="people-container" style="background-color: red;"> <div class="people-title"> <h1>Carpenter</h1> </div> <div class="close-btn">&#10006;</div> </div> <div class="people-container"> <div class="people-title"> <h1>Laborer</h1> </div> <div class="close-btn">&#10006;</div> </div> <div class="people-container" style="background-color: blue;"> <div class="people-title"> <h1>Roofer</h1> </div> <div class="close-btn">&#10006;</div> </div> 

Answer 2

按照您链接的示例网站的方法精简了版本。 它使用CSS transition来处理动画。

 $(document).ready(function() { $('.shutter').click(function() { if ($(this).hasClass('close-animate') || !$(this).hasClass('shutterExpanded')) { $(this).removeClass('close-animate').addClass('shutterExpanded'); $('.wrapper').addClass('shutterOpen'); } else { $(this).removeClass('shutterExpanded').addClass('close-animate'); $('.wrapper').removeClass('shutterOpen'); } }); }); 

 body, html { width: 100%; height: 100%; margin: 0; } .wrapper { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; transition: all .5s ease; } .shutter { position: relative; display: block; width: 100%; height: 20%; background: #000; box-sizing: border-box; border-top: 1px solid #323232; transition: all .75s ease; cursor: pointer; overflow: hidden; z-index: 5; box-sizing: border-box; text-align: center; color: #fff; } .shutterOpen .shutter { height: 0; } .shutter.shutterExpanded { height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="shutter"> <h2 class="shutterTitle">Roofer</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Contractor</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Tiler</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Electrician</h2> </div> </div> 

Answer 3

尝试这个！！ 接近就是相似

.screen-animate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  animation: fill-animate 1.5s forwards;
}
/** Fill screen animation **/
@keyframes fill-animate
{ 
    0% { 
        width: 100%;
        top: 0;
        left: 0;
        height: 100px;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}