Масштабирование/масштабирование с помощью CSS/JS

Question

Я пытаюсь создать жидкую и плавную анимацию масштабирования/масштабирования с помощью чистого CSS или JS. В основном я пытаюсь воспроизвести первый пример здесь: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx («Гаджеты Windows Desktop используют плавные переходы между их сжатыми и подробными состояниями»).

Сложная часть состоит в том, что содержимое элемента, которое я хочу масштабировать, изменяется при малом или большом (как на примере из Windows). Вероятно, они должны просто исчезнуть где-то в середине анимации.

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

Я не уверен, как это сделать, возможно, здесь есть кто-то, кто сделал что-то подобное и может помочь?

Answer 1

Просто, чтобы вы начали:

Если переход между двумя «элементами», вы можете превратить первый первый элемент в размере и вместо второго элемента, а затем исчезать первый элемент.

Вы можете увидеть, как это сделать в этом fiddle.

Примечание: Если содержимое первого элемента не должно адаптироваться при изменении размера, вы можете сделать то же самое с transform: scale и transform: translate.