CoreAnimatedPages英雄-p属性

Question

在我探索core-animated-pages examples时，我注意到某些元素中的hero-p属性。

我在documentation中找不到任何关于它的提及。

这个hero-p属性究竟做了什么？

Answer 1

当英雄转换运行时，具有hero-p属性的元素将应用以下规则（请参阅core-animated-pages / transitions / 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;
  }

删除转换运行时应用的任何框阴影。