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。

请参阅代码段

＆＃13;

$(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');
    }

  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

根据您链接的示例网站的方法删除版本。它使用CSS transition来处理动画。

＆＃13;

$(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');
    }
  });
});

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

将div从当前位置设置为全屏大小，然后再次单击以将动画恢复为原始大小

3 个答案: