0

コードに app-drawer があります。

<app-drawer-layout fullbleed force-narrow>
<app-drawer swipe-open opened="{{drawerOpened}}">
   ...
</app-drawer>

また、サイトがシェル (app-toolbar、app-drawer など) をロードしている間、ドロワーは常に 0.2 秒間グリッチ (開閉) します。これらの不具合は、エッジ ブラウザーと Firefox (場合によっては) ブラウザーで確認できます。

そこで、次を追加して修正することにしましたvisibility:hidden。

<app-drawer swipe-open opened="{{drawerOpened}}" style="visibility:hidden;">
   ...
</app-drawer>

ページのシェルがロードされてから 2 秒後に make が再び表示されます (-ish):

  setTimeout(function(){
        $(document).ready(function() {
            $("app-drawer").css( "visibility", "visible;" );
        });
    },2000);

しかし、この jquery コードでは、それが表示されません。

インターネットを検索しているときに、 を使用するPolymer.dom(this.root).querySelector代わりに を 使用する必要があることがわかりました$("app-drawer")が、初心者なので、このコードでそれを実装する方法がわかりません。何か助けはありますか？

4

1 に答える 1

1

app-drawer が定義されている場所によって異なります。

< body > の最初のレベルに直接ある場合は、jquery (ID、クラス、タグ名 w/e) でアクセスできます。

<script>
  window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
    $("app-drawer").css( "visibility", "visible;" );
  });
</script>

app-drawer がカスタム要素にある場合は、シャドウ ルートを渡す必要があります (jQuery はセレクターを介してシャドウ ルートを調べていないため)。

ポリマー dom 関数を使用して、シャドウ ルートを通過し、要素に到達できます。app-drawer が定義されている要素への参照を取得し、$ 変数を確認してください。

document.querySelector("#YOUR-ELE-AROUND-APP-DRAWER").$.appDrawerID.style.visibility = "visible";

https://www.polymer-project.org/1.0/docs/devguide/local-dom#node-finding

3 番目の解決策は、app-drawer が定義されているカスタム要素内で直接 jquery を使用してアクセスすることです。

ready: function() {
      // access a local DOM element by ID using this.$
      $("app-drawer").css( "visibility", "visible;" );
    }

https://www.polymer-project.org/1.0/docs/devguide/registering-elements#ready-method

フィドルの例: https://jsfiddle.net/PatrickJaja/55cbdft5/

于 2016-09-25T17:20:48.207 に答える