如何使用Ember Liquid-Fire在具有不同字体大小的两个元素之间进行转换

Question

我正在使用Ember和Liquid Fire在路线之间创建一些有趣的材料设计灵感动画过渡.

我创造了两个过渡.从在过渡期间的第一次出现index路线about路线并使用explode,flyTo以及toLeft转变成功.在这里,我通过data-nav两个路线上的属性进行匹配,以创建平滑,无缝的过渡,使得匹配的元素在向左飞行时看起来在屏幕上移动到下一页.竖起大拇指!

第二种情况发生在从about路线回到路线的过渡期间index.在这里,我通过data-text两个路径上的属性匹配上面的元素,但是与上面的示例不同,元素不相同.具体来说,font-size是不同的.不幸的是,这会产生不希望的效果,即立即显示较大的字体大小的文本,然后让它飞过页面.

我想要做的是添加一个动画字体大小的额外过渡.听起来很简单.

下面是我的初始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是不正确.它最终抓住了新的字体大小.第二个问题是没有字体缩放发生.

我研究过动画字体,所以我相信它可以做到.建议？