双向 CSS 过渡

Question

我正在 how to create an animated sticky header, with CSS3 and jQuery.

上实现这篇文章中的折叠粘性 header

header 当前正在使用以下行对所有 CSS 更改进行动画处理：

transition: all 0.4s ease;

应用粘性 header 后，以下 css 属性发生变化：

  font-size:   72px;    /* --> 24px;    */
  line-height: 108px;   /* --> 48px;    */
  height:      108px;   /* --> 48px;    */
  background:  #335C7D; /* --> #efc47D; */
  text-align:  center;  /* --> left;    */
  padding-left: auto;   /* --> 20px;    */

因此所有过渡都应该在每个属性的现有值和新值之间优雅地移动。

但是，我注意到当我向下滚动时，文本很好地以动画方式变小并向左移动。但是，当我向上滚动时，当文本丢失 text-align:left 属性.

时，它似乎跳出中间而不是向右移动

$(window).scroll(function () {
  var belowTop = $(this).scrollTop() > 30;
  $('header').toggleClass('sticky', belowTop);
});

/*reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

header {
  position: fixed;
  width: 100%;
  font-family: 'PT Sans', sans-serif;
  transition: all 0.4s ease;
  color: #fff;

  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  text-align: center;
}
header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header><h1>Sticky Header</h1></header>
<img src="http://i.stack.imgur.com/8pezV.jpg" alt="Big Image" />

Answer 1

所有被更改的属性都将被动画化的假设是不正确的。

只有 可动画的 属性会被优雅地转换，text-align 不可动画。

这是 complete list of animatable properties from MDN。

这是一个增加动画时间的简化示例。很容易看出左对齐文本的动画从一开始就没有出现。

$(window).scroll(function () {
  var belowTop = $(this).scrollTop() > 30;
  $('header').toggleClass('sticky', belowTop);
});

header {
  position: fixed;
  width: 100%;
  transition: all 2s ease;

  font-size: 32px;
  text-align: center;
}
header.sticky {
  font-size: 16px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header><h1>Header</h1></header>
<img src="http://i.stack.imgur.com/8pezV.jpg" alt="Big Image" />

作为动画文本对齐的解决方法，这里有几个堆栈溢出线程以及涉及其他动画属性或 jQuery.

的解决方案

CSS3 - animate text align left/center/right
Is it possible to transition text-alignment using CSS3 only?
Animate text alignment using jquery
How to use jquery .animate() to mock 'text-align:right'

双向 CSS 过渡

Bidirectional CSS Transition

jquery

html

css

css-animations