小编Nor*_*own的帖子

我正在使用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: [ …