雙向CSS轉換

我在how to create an animated sticky header, with CSS3 and jQuery上實現了本文中的摺疊粘貼標題。雙向CSS轉換

頭當前動畫與下面的行的所有CSS的變化：

transition: all 0.4s ease;

當粘頭施加下面的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" />

來源

2015-02-17 KyleMit

是被改變了所有的屬性將被動畫的假設是不正確。

只有動畫屬性將優雅地過渡，並且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的解決方案。

來源

2015-02-17 22:38:42 KyleMit

回答

相關問題