【发布时间】：2014-07-27 01:03:29
【问题描述】：
我正在创建一个“径向选择器”自定义元素，该元素在鼠标进入和鼠标离开时动画。
我希望我的自定义元素的用户能够使用径向选择器标签来包装他们自己的内容，如下所示：
<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 定义仍然完全存在于 shadow dom 中？没有办法向它们添加 ::content 伪选择器，对吧？我试过 ::content @keyframes ..etc。但没有运气。
我是否必须硬着头皮将 light DOM 子项带入 shadow dom？或者有没有办法使用自定义元素中定义的 css 动画来为轻量级 DOM 子级设置动画？
【问题讨论】：
标签： css dart polymer dart-polymer shadow-dom