7

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

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

4

0 回答 0