Анимированное масштабирование / масштабирование сайта

Question

Пожалуйста, посмотрите на http://www.mediawiki.org/ с помощью Chrome и попробуйте увеличить / уменьшить масштаб страницы (Ctrl + +/-).

Кто-нибудь может дать какие-нибудь советы о том, как реализовать такую ​​обработку анимированного зума? Я заметил, что это не работает во всех браузерах.

Спасибо!

Answer 1

Проверить CSS transition имущество

Вот некоторый код с сайта MediaWIKI, который сделал это возможным:

div#mw-panel div.portal div.body,div#mw-panel div.portal h5 {
    transition:padding-left 250ms;
    -moz-transition:padding-left 250ms;
    -webkit-transition:padding-left 250ms;
    -o-transition:padding-left 250ms;
}

Answer 2

Как уже говорилось, это обрабатывается браузером, но вы делаете это на сайте, используя проценты и / или ems для таких вещей, как ширина шрифта и поля.

РЕДАКТИРОВАТЬ Я не смотрел на это в Chrome (даже если вы сказали, что мы должны), и поэтому пропустил анимацию (черт!). Извиняюсь.

Answer 3

Я не уверен, но я думаю, что вы можете добиться того же, создав веб-сайт в формате em или% и просто анимировать ширину родительского контейнера и свойство шрифта... все дочерние элементы будут автоматически анимироваться...

Например... у вас есть font-size 1em для элемента body, все дочерние элементы также имеют размер шрифта, связанный с размером шрифта контейнера body в формате em. когда вы увеличиваете или уменьшаете размер шрифта элемента body, дочерние элементы также увеличивают и уменьшают его размер шрифта, а когда вы анимируете размер шрифта основного текста, дочерний элемент также анимирует свои размеры шрифта...

(Это моя идея, может быть, это помогает)...