Using Shadow Dom CSS Animations on distributed (i.e., light dom) nodes with Polymer.dart
Question
I am creating a "Radial Selector" custom element which animates on mouse-enter and on mouse-leave.
I would like users of my custom element to be able to wrap their own content with the radial-selector tag like so:
<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>
I'm trying to animate the light DOM children without bringing them into the shadow DOM of my element, which seems like it might be overkill for this task. I want the definitions of these animations to exist within the custom element's template tag for obvious encapsulation reasons. I figured this would all be possible to do since you can reveal light DOM nodes to the custom element using the insertion tag, and then target the inserted light DOM nodes with a CSS Style by using the ::content pseudo-selector.
This is what I tried to do in the following radial selector html definition:
<!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>
However, the element is not animating at all. I add and remove the appropriate classes in response to the proper events, and the inspector shows the classes/styles changing.
The ::content pseudo-selectors work in applying regular styles (eg, position: absolute), but not the -webkit-animation properties. Maybe it's because the @keyframes definitions still live completely in the shadow dom? There's no way to add a ::content pseudo-selector to them, right? I tried ::content @keyframes ..etc. but no luck.
Do I have to bite the bullet and bring the light DOM children into the shadow dom? Or is there a way to animate the light DOM children using css animations defined in the custom element?
1 answers
solution1
4 ACCPTED 2014-06-08 23:59:56
I believe @keyframes , like @font-face , have to be in document level CSS so you'll need to pull them out of your element. Here's an example: http://jsbin.com/zisupu/6/edit
Previously this was documented in the Polymer docs but has since been commented out. I've opened a thread to see if we can sort out a recommendation. https://github.com/Polymer/docs/issues/434
edit
Opened Chromium bug #382498
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.