3

我正在创建一个“径向选择器”自定义元素，它在鼠标输入和鼠标离开时动画。

我希望我的自定义元素的用户能够使用径向选择器标签来包装他们自己的内容，如下所示：

 <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 的情况下为 light DOM 子级设置动画，这对于这项任务来说似乎有点矫枉过正。出于明显的封装原因，我希望这些动画的定义存在于自定义元素的模板标签中。我认为这一切都是可能的，因为您可以使用插入标签向自定义元素显示轻量级 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 伪选择器适用于应用常规样式（例如，位置：绝对），但不适用于 -webkit-animation 属性。也许是因为 @keyframes 定义仍然完全存在于影子 dom 中？没有办法向它们添加 ::content 伪选择器，对吧？我试过 ::content @keyframes ..etc。但没有运气。

我是否必须硬着头皮将 light DOM 子项带入 shadow dom？或者有没有办法使用自定义元素中定义的 css 动画来为轻量级 DOM 子级设置动画？

4

1 回答 1

4

我相信@keyframes，@font-face必须在文档级别的 CSS 中，因此您需要将它们从元素中拉出。这是一个例子：http: //jsbin.com/zisupu/6/edit

以前这在 Polymer 文档中有记录，但后来被注释掉了。我已经打开了一个线程，看看我们是否可以整理出一个建议。https://github.com/Polymer/docs/issues/434

编辑

打开Chromium 错误 #382498

于 2014-06-08T23:59:56.643 回答