CSS3 动画 - 动态内容的关键帧答案

【问题标题】：CSS3 Animation - Keyframe To For Dynamic ContentCSS3 动画 - 动态内容的关键帧
【发布时间】：2016-02-16 15:57:02
【问题描述】：

我对 CSS3 目前不支持关键帧动画的 height: auto 值进行了一些调查。

其中一个技巧似乎是使用 max-height 作为值来破解它的工作。

我正试图做相反的事情。我希望我的标题包装器缩小并让导航在它所属的地方向上滑动。

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

CSS3 游乐场（静态高度）

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>

【问题讨论】：

你可以做this之类的事情吗？
我不知道为什么我没有在两个领域都尝试 min-height ......我认为可以，因为在这种情况下不一致的时间并不重要，因为它只会移动一个方法。那应该工作！谢谢！

标签： jquery css css-animations keyframe

【解决方案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>

【讨论】：