6

（申し訳ありませんが、どこから始めればよいかわからないため、私が求めているコードを提供することはできません。）

マテリアル デザイン ガイドラインの意味のあるトランジションポイントについて。

Web アプリ内でこのようなスムーズな移行を作成することに非常に興味があります (特に、プロファイル画像がアクティビティから別のアクティビティに移動する場合)。

  • CSS3トランジションはそれを行うのに十分ですか(要素を簡単に移動するには、どのスタイルプロパティを使用する必要がありますか?)
  • 奇妙な座標系を使用して「共有ビュー要素」を移動するには、JS/Dart を使用する必要がありますか?
  • 動的/スクロール レイアウトで動作しますか、それとも忘れる必要がありますか?
  • ノードをコンテナーから別のコンテナーにスムーズに移動するためのヒントはありますか?

一言で言えば、HTML はそのようなものに対応していますか (任意のコード/ドキュメントをいただければ幸いです)。いくつかのポリマー ツールがこれを行うのを待つ必要がありますか? それとも、単にこれを Web で行うべきではありませんか?

4

3 に答える 3

7

Polymer core-animated-pages 要素をチェックしてください https://elements.polymer-project.org/elements/neon-animation

意味のあるトランジションに非常によく似た素晴らしいデモがいくつかあります https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

「アイコンからトップバーへ」のデモは、おそらくあなたが参照したものに最も似ています (ソースを表示して、使用されている Polymer Web コンポーネントと、必要な CSS および JS を確認できます)

Bower 経由でプロジェクトにインポートできます。

bower install Polymer/core-animated-pages

要素をラップし、次のような属性でトランジションを定義します

そのクロスフェードの例のコードは次のとおりです。

<style>
#hero1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: orange;
}
#hero2 {
    position: absolute;
    top: 200px;
    left: 300px;
    width: 300px;
    height: 300px;
    background-color: orange;
  }
  #bottom1, #bottom2 {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    height: 50px;
  }
  #bottom1 {
    background-color: blue;
  }
  #bottom2 {
    background-color: green;
  }
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
      <section id="page1">
    <div id="hero1" hero-id="hero" hero></div>
    <div id="bottom1" cross-fade></div>
  </section>
  <section id="page2">
    <div id="hero2" hero-id="hero" hero></div>
    <div id="bottom2" cross-fade></div>
  </section>
</core-animated-pages>
于 2014-08-26T15:45:33.683 に答える
5

ポリマーはこれらのことを何もしません。これはすべて HTML+CSS+JavaScript です。そして、これらすべてを Polymer なしで行うことができます。

Polymer でできることは、これらをカスタム要素にカプセル化できることだけです。

コア要素と紙要素は、いくつかの例です。このような要素を自分で構築するか、複製して変更/拡張することができます。

于 2014-07-02T13:29:15.693 に答える
2

私の知る限り、ポリマーはこれらすべてを実行できるはずです。まだなら、すぐにできるはずです。

ポリマーの背後にある基本的な考え方は、すべてのデバイス (Web、コンピューター、Android) で一貫したインターフェイスを作成できるようにすることです。したがって、Android L がこれらの移行を実行できる場合、ポリマーもその機能を備えていることを意味することは間違いありません。

于 2014-07-01T20:39:12.790 に答える