使用Polymer.dart在分布式（即輕型dom）節點上使用Shadow Dom CSS動畫

Question

我正在創建一個“徑向選擇器”自定義元素，它可以在鼠標輸入和鼠標離開時激活。

我希望我的自定義元素的用戶能夠使用徑向選擇器標記包裝自己的內容，如下所示：

 <radial-selector img="url(assets/phone.png)" style = "width: 200px; top:100px; left: 100px">
           <img src="assets/phone.png" style = "height: 50px; width: 50px"/>
           <img src="assets/house.png" style = "height: 50px; width: 50px"/>
           <img src="assets/house.png" style = "height: 50px; width: 50px"/>
           <img src="assets/house.png" style = "height: 50px; width: 50px"/>
           <img src="assets/house.png" style = "height: 50px; width: 50px"/>
           <img src="assets/house.png" style = "height: 50px; width: 50px"/>
 </radial-selector>

我試圖動畫輕DOM子項而不將它們帶入我的元素的陰影DOM，這似乎對於這個任務可能有點過分。 我希望這些動畫的定義存在於自定義元素的模板標記內，這是出於明顯的封裝原因。 我認為這是可能的，因為你可以使用insert標簽向自定義元素顯示輕DOM節點，然后使用:: content偽選擇器使用CSS樣式定位插入的輕DOM節點。

這是我在下面的徑向選擇器html定義中嘗試做的事情：

<!DOCTYPE html>

<polymer-element name="radial-selector">   
  <template>
    <style>
    :host {
    display: block;
    position: absolute;
    }

    ::content .leaf {
    position: absolute;
    -webkit-transform: scale({{maxLeafScale}}, {{maxLeafScale}});
    opacity: {{maxLeafOpa}};
    }

    ::content .expand {

    -webkit-animation: expand 1s;

    }

    ::content .close {
    -webkit-animation: close 1s;
    }

    ::content .bump {
    -webkit-animation: bump 1s;
    }

    ::content .unbump {
    -webkit-animation: unbump 1s;
    }

    ::content #stem {
    position: absolute;
    -webkit-transform: scale({{maxStemScale}}, {{maxStemScale}});
    }


     @-webkit-keyframes expand {
       from {opacity: {{currLeafOpa}};
             -webkit-transform: scale({{currLeafScale}}, {{currLeafScale}});
        }
       to {opacity: {{maxLeafOpa}}; 
           -webkit-transform: scale({{maxLeafScale}}, {{maxLeafScale}});
       }
    }

     @-webkit-keyframes bump {
    from {
    -webkit-transform: scale({{currStemScale}}, {{currStemScale}});
    }
    to {
    -webkit-transform: scale({{maxStemScale}},{{maxStemScale}});

    }
    }

     @-webkit-keyframes unbump {
    from {
    -webkit-transform: scale({{currStemScale}}, {{currStemScale}});
    }
    to {
    -webkit-transform: scale({{minStemScale}}, {{minStemScale}});

    }

    }

     @-webkit-keyframes close {

           from {opacity: {{currLeafOpa}};
             -webkit-transform: scale({{currLeafScale}}, {{currLeafScale}});
        }
       to {opacity: {{maxLeafOpa}}; 
           -webkit-transform: scale({{minLeafScale}}, .{{minLeafScale}});
       }

    }
    </style>
    <content></content>
   </template>
  <script type="application/dart" src="radialselector.dart"></script>
</polymer-element>

但是，該元素根本不是動畫。 我添加和刪除適當的類以響應正確的事件，檢查器顯示更改的類/樣式。

:: content偽選擇器適用於應用常規樣式（例如，position：absolute），但不適用於-webkit-animation屬性。 也許是因為@keyframes定義仍然完全存在於影子dom中？ 沒有辦法為它們添加一個:: content偽選擇器，對嗎？ 我試過:: content @keyframes ..etc。 但沒有運氣。

我是否必須咬緊牙關並將光明DOM兒童帶入影子dom？ 或者有沒有辦法使用自定義元素中定義的css動畫為light DOM子項設置動畫？

Answer 1

我相信@keyframes ，比如@font-face ，必須在文檔級CSS中，所以你需要將它們從你的元素中拉出來。 這是一個例子： http ： //jsbin.com/zisupu/6/edit

以前這在Polymer docs中有記錄，但后來被注釋掉了。 我打開了一個帖子，看看我們是否可以整理推薦。 https://github.com/Polymer/docs/issues/434

編輯

打開Chromium bug＃382498

使用Polymer.dart在分布式（即輕型dom）節點上使用Shadow Dom CSS動畫

問題描述

1 個解決方案

解決方案1
4 已采納 2014-06-08 23:59:56

使用Polymer.dart在分布式（即輕型dom）節點上使用Shadow Dom CSS動畫

問題描述

1 個解決方案

解決方案1 4 已采納 2014-06-08 23:59:56

解決方案1
4 已采納 2014-06-08 23:59:56