我正在创建一个“径向选择器”自定义元素，它可以在鼠标输入和鼠标离开时激活 .
我希望我的自定义元素的用户能够使用径向选择器标记包装自己的内容，如下所示：
<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子项设置动画？
1 回答
我相信
@keyframes，如@font-face，必须在文档级CSS中，所以你'll need to pull them out of your element. Here'是一个例子：http://jsbin.com/zisupu/6/edit以前这在Polymer docs中有记录，但后来被注释掉了 . 我打开了一个帖子，看看我们是否可以整理推荐 . https://github.com/Polymer/docs/issues/434
编辑
已打开Chromium bug #382498