polymer - CoreAnimatedPages Hero-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;
  }

这会删除过渡运行时应用的任何盒子阴影。