Как реализовать анимация для поиска на navbar?

Question

[Jedi]

Здравствуйте . Хочу я реализовать поиск точно такой же как на сайте Apple Inc. . У них анимация выполнено офигенно! Первое что бросается в глаза это - исчезновение ссылок и заполнение input. Супер просто!

Comments

[Сергей delphinpro]

Анимированным элементам - транзишны. кривые можно прямо у эппл спи.ть.
Начальное состояние свойств. Конечное состояние свойств (по классу, который можно вешать на общий родительский блок).
Анимируемые свойства - transform:translate, opacity и transform:rotateY (с backface-visibility: hidden)
полчаса-час посидеть и можно сделать один-в-один так же.
ну или тупо стили дёрнуть.

[Сергей delphinpro]

не, там даже проще, без 3d поворотов (показалось =) )
исчезновение ссылок - просто transform:scale(0) + opacity:0

[Jedi]

Сергей: Огромное спасибо! :D

[Jedi]

Сергей: Я так понимаю там все без js, это так?

[Сергей delphinpro]

PHPjedi: нет. js там используется. но можно обойтись минимальным навешиванием класса на родительский блок при фокусе поля поиска.
Можно вообще без js, отплясывая от input:focus, но этот как раз тот случай, когда немного javascript лучше, чем чистый css.

[Нерон Лордов]

не без греха эта анимация. страница противно дергается. да и ux сомнительный - зачем показывать интерфейс поиска поверх кнопок навигации, скрывая к ним доступ? в общем если снять розовые очки и поумерить щенячий восторг от того что "Это же эппл! Супер просто!" то можно реализовать решение получше.