jquery - CSS3 动画 - 动态内容的关键帧

Question

我仔细查看了 CSS3 目前如何不支持关键帧动画的 height: auto 值。

其中一个技巧似乎是使用 max-height 作为一个值来让它正常工作。

我正在尝试做相反的事情。我希望我的 header 包装器缩小并让导航在它所属的位置向上滑动。

如果有人可以向我展示如何设置 inherit 或 auto 同时避免使用 javascript，我已经准备好了一个简单的模型。

CSS3 Playground (静态高度)

https://jsfiddle.net/z3ytveu5/3/

@keyframes logoWrapDrop {
  from {
    height: 500px;
  }
  to {
    height: 200px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}

<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

我必须使用 JavaScript/jQuery 才能实现吗？或者是否有仅 CSS3 的解决方法来定义我的包装器的自动高度？

使用 JS(动态高度):

https://jsfiddle.net/z3ytveu5/2/

$(function() {
  var h = $('#logoWrap').height();
  $.keyframe.define({
    name: 'logoWrapDrop',
    from: {
      'height': '500px'
    },
    to: {
      'height': h + 'px'
    }
  });
  $('#logoWrap').addClass('animating');
});

* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquerykeyframes/0.0.9/jquery.keyframes.min.js"></script>
<div id="logoWrap">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

Answer 1

您实际上可以使用 max-height 的反义词，即 min-height。最初将 min-height 设置为某个任意大的值，然后将其设置为 0px 的动画。由于 height 设置为 auto，它不会缩小超出显示内容所需的范围。

@keyframes logoWrapDrop {
  from {
    min-height: 500px;
  }
  to {
    min-height: 0px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}

<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
    <br>How to avoid static keyframe "to" px?
    <br>How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>

---

内容较少的片段:

@keyframes logoWrapDrop {
  from {
    min-height: 500px;
  }
  to {
    min-height: 0px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#logoWrap {
  background: #69C;
}
#logoWrap.animating {
  animation-name: logoWrapDrop;
  animation-duration: 4s;
}
#navigation li {
  list-style-type: none;
  float: left;
  background: #CCC;
  padding: 1em;
  margin: 0 1em;
}

<div id="logoWrap" class="animating">
  <h1>Responsive Content - Dynamic Height</h1>
  <p>
    How to avoid static keyframe "to" px?
  </p>
</div>
<div id="navigation">
  <ul class="nav">
    <li>Nav 1</li>
    <li>Nav 2</li>
  </ul>
</div>