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不正确。它最终抓住了新的字体大小。第二个问题是没有字体缩放。

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

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

0 个答案: