Question

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

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

 <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 个答案: