Двунаправленный переход 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

Предположение о том, что все свойства меняются будут анимированы неверен.

Только animatable свойства будут переведены изящно, и 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" />

В качестве обходного пути к анимации выравнивания текста, вот переполнение стека пара нити с решениями, связанными с другим Animatable свойств или JQuery.

источник

2015-02-17 22:38:42 KyleMit

Двунаправленный переход CSS

ответ

Смежные вопросы