javascript - 单击时将 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

遵循您链接的示例网站方法的精简版。它使用 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>