Как использовать Ember Liquid-Fire для перехода между двумя элементами с разными размерами шрифта

Question

Я использую Ember и Liquid Fire для создания интересных анимационных переходов между маршрутами, вдохновленных дизайном материала.

Я создал два перехода. Первое происходит во время перехода от index маршрут к about маршрут и использует explode, flyTo, а также toLeft переходы успешно. Здесь я соответствую data-nav атрибут на обоих маршрутах, чтобы создать плавный, плавный переход, который заставляет подобранный элемент перемещаться по экрану на следующую страницу, когда он летит влево. Пальцы вверх!

Второе происходит при переходе от about маршрут обратно к index маршрут. Здесь я соответствую элементу, отличному от data-text атрибут на обоих маршрутах, однако, в отличие от приведенного выше примера, элементы не идентичны. В частности, размер шрифта отличается. К сожалению, это приводит к нежелательному немедленному отображению текста с большим размером шрифта и последующему его пролистыванию по странице.

Что я хотел бы сделать, это добавить дополнительный переход, который анимирует размер шрифта. Звучит достаточно просто.

Ниже мой начальный transitions.js файл с двумя переходами, описанными выше.

export default function() {
  var duration = 1000;

  this.transition(
    // --------------------- INDEX to ABOUT ----------------------------------- //
    this.fromRoute('index'),
    this.toRoute('about'),
    this.use('explode', {
      matchBy: 'data-nav',
      use: [ 'flyTo', { duration } ]
    }, {
      use: [ 'toLeft', { duration } ]
    }),

    // --------------------- ABOUT to INDEX ----------------------------------- //
    this.reverse('explode', {
      matchBy: 'data-text',
      use: [ 'flyTo', { duration } ]
    }, {
      use: [ 'toRight', { duration } ]
    })
  );
}

Я полагаю, что ответ заключается в том, чтобы создать свой собственный переход, однако он оказывается довольно сложным. Я создал собственный переход под названием scale-font.js и добавил его в мой transitions.js файл для этого перехода.

import { animate, Promise } from "liquid-fire";

export default function scaleFont(opts={}) {
  // returns a Promise that resolves when the transition is done
  if (!this.newElement) {
    return Promise.resolve();
  } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return Promise.resolve();
  }

  var oldFontSize = this.oldElement.css('font-size');
  var newFontSize = (opts.selector ? this.newElement.find(opts.selector) : this.newElement).css('font-size');

  this.newElement.css({ visibility: 'hidden' });

  return animate(
    this.oldElement,
    { fontSize: oldFontSize },
    { duration: 1000 }
  ).then(() => {
    return animate(
      this.newElement,
      { fontSize: newFontSize },
      { duration: 1000, visibility: 'visible' }
    );
  });
}

К сожалению, это не совсем работает. Первая проблема заключается в том, что oldFontSize не является правильным. В конечном итоге захват нового размера шрифта. Вторая проблема - не происходит масштабирование шрифтов.

Я исследовал анимацию шрифтов, поэтому я вполне уверен, что это можно сделать. Предложения?