Question

原始问题

我的网络应用包含<polymer-element>（<inventory-list>），其中包含约30 <polymer-element> s（<inventory-card>）。每个<inventory-card>都包含一张图片和一些文字。每当我点击<paper-button>或<paper-ripple>时，涟漪效果会在动画开始时冻结，然后涟漪消失。

当我删除<inventory-list>时，纹波动画会正常动画。

只有在我的移动设备（运行Android 5.0的Nexus 7）上进行测试时才会发生这种情况。我在桌面上没有这个问题。

如何阻止涟漪动画冻结？

我对使用noink不感兴趣。

任何帮助都将不胜感激。

只是为了澄清，这是<inventory-list>

的结构

<polymer-element>
  <template>
    <div id="container">
      <template repeat="{{item in items}}">    <!-- {{items}} contains about 30 items -->
        <inventory-card>

这是<inventory-card>：

的结构

<polymer-element>
  <template>
    <paper-shadow>
      <paper-ripple/>
      <span/>
      <div id="inset-shadow"/>
      <img/>

更新1：暗影导致冻结

当我删除<div id="inset-shadow">时，涟漪动画不再冻结。

我用来实现插入阴影的CSS是：

box-shadow: inset 0 -30px 50px -10px rgba(0, 0, 0, 0.2);

该div还具有以下CSS属性：

position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; bottom: 0;

如何在不导致涟漪动画冻结的情况下实现此类插入阴影？

Polymer的Ripple动画因<div>与Inset Shadow </div>而冻结

原始问题

更新1：暗影导致冻结

0 个答案: