Question

我已经了解了CSS3目前如何支持关键帧动画的height: auto值。

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

我试图做相反的事情。我希望我的标题包装器收缩并让导航器在它所属的位置下滑动。

如果有人可以向我展示如何在避免使用javascript的同时设置inherit或auto的任何技巧，我会准备一个简单的模型。

CSS3 Playground （静态高度）

＆＃13;

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

＆＃13;

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

＆＃13;

我是否必须使用JavaScript / jQuery来实现这一目标？或者是否只有CSS3解决方法来定义包装器的自动高度？

使用JS （动态高度）：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

1 个答案: