Hero-p CoreAnimatedPages attribute
While I was looking at the core-animated-pages
examples , I noticed the attribute hero-p
on some elements.
I can't find any mention of this in the documentation .
What does this attribute hero-p
do?
+3
source to share
1 answer
When a hero transition occurs, elements with the hero-p attribute get the following rules (see core-animated-pages / transition / hero-transition.html):
polyfill-next-selector { content: ':host > * [hero-p]'; }
::content > * /deep/ [hero-p] {
-webkit-transition: box-shadow 100ms ease-out;
transition: box-shadow 100ms ease-out;
}
polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
::content > [animate] /deep/ [hero-p] {
box-shadow: none !important;
}
Which removes any shadow they applied when performing the transition.
+3
source to share