0

我的代码中有一个应用程序抽屉：

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

当站点加载其外壳（应用程序工具栏、应用程序抽屉等）时，抽屉总是出现故障（打开和关闭）0.2 秒。我可以在边缘和火狐（有时）浏览器中看到这些故障。

所以我决定通过添加来修复它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

第三种解决方案可以是在定义 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 回答